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>

我希望看到的是在输入字段中键入的任何更新都会自动出现在子项中（加上更改的事件触发），但子项似乎根本没有绑定！我也尝试过将 bind 换成 two-way 以防约定约束 one-way 但仍然没有奏效。

请强调我的愚蠢 :) 因为目前我一直认为这应该可行。

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

The defaults and conventions are shown above. So, you would only need to specify these options if you need to deviate.

所以你需要在HTML

中写上child-data.bind

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

Plunkr

Aurelia中父子自定义元素的双向绑定

Two-way binding between parent and child custom element in Aurelia

aurelia