Aurelia 自定义元素数据绑定

Question

我在我的 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 .

在 pointer/suggestion/feedback 表示赞赏。

更新： 如果有人能指出点符号和索引器符号之间的区别 w.r.t。 aurelia data-binding（我已经检查过 this），这会有很大帮助。

Answer 1

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

我在最新版本的 aurelia 中尝试了您的 view/view-model，一切正常。这是我看到的截屏视频：http://screencast.com/t/KqcuqXWjkU2

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

Aurelia 自定义元素数据绑定

Aurelia Custom Elements data binding

javascript

custom-element

aurelia