Question

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

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

简单视图模型

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），这将有很大帮助。

Answer 1

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

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

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

Aurelia自定义元素数据绑定

1 个答案: