Aurelia自定义元素数据绑定

Question

我在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 。

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

更新：如果任何人都可以点出点符号和符号索引WRT Aurelia大街之间的差值数据绑定 （我已经检查这个的话），那将是很大的帮助。

Answer 1

这是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/