Javascript Aurelia自定义元素数据绑定

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

但是，如果我对视图模型中的数据进行了一些更改（使用javascript），那么定制元素中的数据不会更新。为了更简单的设置，我复制了这个问题

简单视图模型

简单视图

游乐场
更新项目1
验证更改

现在，每当我在文本框中更改值后单击“验证更改”，更改后的值就会出现在警报中。但是，如果我单击

updateprop1

按钮，则

Prop1

值会得到更新，但更改不会反映在视图中。 我不确定我到底错过了什么

注意：不使用

$parent.testObj['prop1']

，如果使用了

$parent.testObj.prop1

，数据绑定将正常工作。但是，我的实际自定义元素是泛型元素，并且属性名在我之前是未知的，因此我似乎需要继续使用

$parent.testObj['prop1']

符号而不是点符号：

$parent.testObj.prop1

感谢您的指点/建议/反馈

---

更新：如果有人能指出点表示法和索引表示法之间的区别w.r.t.aurelia数据绑定（我已经检查过了），那将非常有帮助

这是早期版本的

aurelia/binding

模块中的一个问题。以下是相关问题：

我在最新版本的aurelia中试用了您的视图/视图模型，一切都正常。以下是我所看到的画面：

---

确保已安装最新版本的aurelia组件-此处的更新步骤：

这是我的想法，但我想确定一下。

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>