我以为我正在尝试做一些非常简单的事情,但我无法完成这项工作。整个示例位于 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>
父元素显示子元素,但我希望其 View 模型中有一个成员绑定(bind)到子元素,因此父成员中的任何更改都会自动反射(reflect)在子元素中。这是父代码:
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>
我想看到的是,在输入字段中键入的任何更新都会自动出现在 child 中(加上更改的事件触发),但 child 根本没有出现绑定(bind)!我也试过交换
bind
为 two-way
以防万一公约受到约束 one-way
但这仍然没有奏效。请强调我的愚蠢:) 因为目前我认为这应该可行。
最佳答案
@bindable
的默认约定是使用命名约定 'myProperty' -> 'my-property'
将驼峰式属性名称转换为属性名称(破折号 shell )。
来自 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.
所以你需要写
child-data.bind
在你的 HTML 中<child-element child-data.bind="parentData"></child-element>
Plunkr
关于aurelia - Aurelia中父子自定义元素的双向绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32427318/