Zwei-Wege-Bindung zwischen Elternteil und Kind benutzerdefinierte Element in Aurelia

Question

Ich dachte, ich versuchte, etwas sehr einfaches zu tun, aber ich kann einfach nicht funktionieren. Dieses ganze Beispiel ist auf plunkr

Ich habe ein sehr einfaches benutzerdefiniertes Element, das ein @bindable Datenelement darstellt, das es mit einem geänderten Ereignis anzeigt und überwacht. Es sieht wie folgt aus:

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

und die Aussicht:

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

Die Eltern zeigt das untergeordnete Element, aber ich möchte ein Mitglied seiner Ansicht nach Modell, das auf das Kind gebunden ist so eine Änderung der Mutter Mitglied wird automatisch im Kind reflektiert. Hier ist der Muttercode:

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

und die Aussicht:

<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> 

Was ich möchte sehen, ist alle Aktualisierungen in das Eingabefeld eingegeben automatisch in das Kind erscheint (plus die geänderten Ereignis ausgelöst wird) aber das Kind scheint überhaupt nicht gebunden zu sein! Ich habe auch versucht, bind für two-way zu tauschen, nur für den Fall, dass die Konvention one-way gebunden hat, aber das hat immer noch nicht funktioniert.

Bitte markieren Sie meine Dummheit :) weil ich derzeit stecken denke dies sollte nur funktionieren.

Answer 1

Die Standardkonvention für @bindable besteht darin, die Camel-case-Eigenschaftsnamen gemäß der Namenskonvention 'myProperty' -> 'my-property' (Dash-Gehäuse) in Attributnamen umzuwandeln.

Vom 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 
}) 

Die Standardwerte und Konventionen sind oben gezeigt. Sie benötigen also nur , um diese Optionen anzugeben, wenn Sie abweichen müssen.

So müssen Sie child-data.bind in Ihrem HTML

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

Plunkr