web-dev-qa-db-ja.com

Aureliaでの親と子のカスタム要素間の双方向バインディング

非常に単純なことをしようとしているのだと思っていましたが、この作業はできません。この例全体は 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>

私が見たいのは、入力フィールドに入力された更新が子に自動的に表示され（さらに、変更されたイベントが発生する）、子がバインドされていないように見えることです。慣例によりtwo-wayがバインドされている場合に備えて、bindをone-wayに交換することも試みましたが、それでも機能しません。

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

aurelia
24
Phil

@bindableのデフォルトの規則では、キャメルケースのプロパティ名を'myProperty' -> 'my-property'（ダッシュケース）という命名規則を使用して属性名に変換します。

ドキュメント から：

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

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

したがって、HTMLにchild-data.bindを記述する必要があります

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

Plunkr

28
nemesv