我以为我试图做一些非常简单的事情,但我无法做到这一点。整个示例位于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
但仍然没有效果。
请突出我的愚蠢:)因为目前我一直认为这应该有用。
答案 0 :(得分:28)
@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>