Aureliaの親と子のカスタム要素間の双方向バインド

Question

私は非常に単純なことをしようとしていると思っていましたが、この作業を行うことはできません。この全体の例は次のとおりですplunkr

変更されたイベントで表示および監視するデータ・メンバー @bindableを提示する非常に基本的なカスタム要素があります。それは次のようになります。

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

とビューを：

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

は親が子要素を示していますが、私は子供の親メンバーで非常に変更にバインドされています、そのビューモデルのメンバーが欲しいです子供に自動的に反映されます。ここでは、親のコードは次のとおりです。

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

とビュー：私は見てみたいと思い何

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

は、入力フィールドに入力されたすべての更新が自動的に子に表示されますです（プラス変更イベントが発生します）しかし、子供はまったく見えません！私はまた、コンベンションがone-wayにバインドされていてもまだ動作していない場合に備えて、two-wayのスワップbindを試してみました。

私の愚かさを強調してください:)現在、私はこれがちょうどうまくいくと思って立ち往生しています。

Answer 1

@bindableのデフォルトの規約は、キャラルケースのプロパティ名を、名前付け規則'myProperty' -> 'my-property'（ダッシュケーシング）を使用して属性名に変換することです。 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 
}) 

デフォルトおよび規則は、上に示されています。したがって、逸脱する必要がある場合は、これらのオプションを指定するためには が必要です。

だから、[OK]を、今私は愚かな感じ、あなたのHTML

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

Plunkr