aurelia - imagenes - en html, el atributo alt se emplea para

Enlace bidireccional entre elemento personalizado padre e hijo en Aurelia

Question

Pensé que estaba tratando de hacer algo muy simple pero simplemente no puedo hacer que esto funcione. Todo este ejemplo está en plunkr

Tengo un elemento personalizado muy básico que presenta un miembro de datos @bindable que muestra y supervisa con un evento modificado. Se ve así:

import {bindable} from "aurelia-framework";
export class ChildElementCustomElement {  
  @bindable childData;  
  childDataChanged(value) {
    alert("Child Data changed " + value);
  }  
}

y la vista:

<template>
  <div style="border: solid 1pt green;">
    <h2>This is the child</h2>
    This is the child data : ${childData}
  </div>
</template>

El padre muestra el elemento hijo pero quiero un miembro en su modelo de vista que esté vinculado al hijo para que cualquier cambio en el miembro padre se refleje automáticamente en el niño. Aquí está el código principal:

import {bindable} from "aurelia-framework";
export class App {
  parentData = "this is parent data";
}

y la vista:

<template>
  <h1>Two-way binding between parent and child custom elements</h1>
  <require from="./child-element"></require>  
  <child-element childData.bind="parentData"></child-element>  
  <hr/>  
  <label>The following is the parent data:</label>
  <input type="text" value.bind="parentData"></input>  
</template>

Lo que me gustaría ver es que las actualizaciones escritas en el campo de entrada aparecerán automáticamente en el niño (más los disparos de eventos modificados) ¡pero el niño no aparece vinculado en absoluto! También he intentado cambiar el bind por two-way en caso de que la convención haya sido unida por one-way pero eso aún no haya funcionado.

Por favor, resalte mi estupidez :) porque actualmente estoy atascado pensando que esto debería funcionar.

Answer 1

La convención predeterminada para @bindable es convertir los nombres de las propiedades en camello a los nombres de los atributos usando la convención de nombres ''myProperty'' -> ''my-property'' (caja de guiones).

De la documentation :

@bindable({
  name:''myProperty'', //name of the property on the class
  attribute:''my-property'', //name of the attribute in HTML
  changeHandler:''myPropertyChanged'', //name of the method to invoke when the property changes
  defaultBindingMode: bindingMode.oneWay, //default binding mode used with the .bind command
  defaultValue: undefined //default value of the property, if not bound or set in HTML
})

Los valores predeterminados y las convenciones se muestran arriba. Por lo tanto, solo necesitaría especificar estas opciones si necesita desviarse.

Así que necesitas escribir child-data.bind en tu HTML

<child-element child-data.bind="parentData"></child-element>

Plunkr