javascript - Aurelia自定义元素数据绑定(bind)

我在Aurelia应用程序中使用了自定义元素。当我将视图模型中的数据与custom元素绑定在一起时，它工作正常。即使我在自定义元素控件中对数据进行了一些更改，由于双向数据绑定，更改也反映到了视图模型中的数据上。

但是，如果我对视图模型中的数据进行了一些更改（使用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。

在指针/建议/反馈表示赞赏。

更新：如果有人可以指出点表示法和索引器表示法之间的区别。 aurelia数据绑定（我已经检查了this），这将有很大的帮助。

最佳答案

这是aurelia/binding模块的早期版本中的一个问题。以下是相关问题：


https://github.com/aurelia/binding/issues/75
https://github.com/aurelia/binding/pull/76


我在最新版本的aurelia中尝试了您的视图/视图模型，并且一切正常。这是我所看到的屏幕录像：http://screencast.com/t/KqcuqXWjkU2

确保已安装最新版本的aurelia组件-此处更新步骤：http://blog.durandal.io/2015/05/01/aurelia-may-status-and-releases/

关于javascript - Aurelia自定义元素数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30455292/