【发布时间】：2015-08-07 22:26:37
【问题描述】：
我在我的 Aurelia 应用中使用自定义元素。当我将视图模型中的数据与自定义元素绑定时，它工作正常。即使我对自定义元素控件中的数据进行了一些更改，由于双向数据绑定，这些更改也会反映到我的视图模型中的数据中。
但是，如果我对视图模型中的数据进行了一些更改（使用 javascript），则自定义元素中的数据不会更新。我已经复制了这个问题以获得更简单的设置。
简单视图模型
export class Playground {
public testObj: any;
counter = 0;
constructor() {
this.testObj = {
prop1: "This is prop1 value"
, collection2: [{ id: "item21" }]
}
}
updateProp1() {
alert("before update: "+this.testObj.prop1);
this.testObj.prop1 = "Sayan " + this.counter++;
alert(this.testObj.prop1);
}
verifyChange() {
alert(this.testObj.prop1);
}
}
简单视图
<template>
<h1>
Playground
</h1>
<div >
<div repeat.for="item of testObj.collection2">
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="prop1"
value.bind="$parent.testObj['prop1']">
</div>
</div>
</div>
<button click.delegate="updateProp1()" class="btn btn-primary"> Update Prop1 </button>
<button click.delegate="verifyChange()" class="btn btn-primary"> Verify Change </button>
</div>
</template>
现在每当我在更改文本框中的值后单击Verify Change 时，更改的值都会出现在警报中。但是，如果我单击Update Prop1 按钮，prop1 值会更新，但更改不会反映在视图中。
我不确定我到底错过了什么。
注意：如果使用$parent.testObj.prop1，则数据绑定可以正常工作，而不是使用$parent.testObj['prop1']。但是，我的实际自定义元素是通用类型的，并且事先不知道属性名称，因此我似乎需要继续使用$parent.testObj['prop1'] 表示法而不是点表示法：$parent.testObj.prop1。
感谢指针/建议/反馈。
更新：如果有人能指出点表示法和索引器表示法之间的区别w.r.t. aurelia 数据绑定（我已经检查过this），这将有很大帮助。
【问题讨论】：
标签： javascript custom-element aurelia