Polymer 聚合物，绑定到阵列项目不工作

在本例中，属性和数组项之间存在绑定

firstName应该在单击时从“John”更改为“Test”，但这并没有发生

如何使属性在项目更新时更改

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<!-- 
 <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.4/lib/paper-input/paper-input.html" />
  -->
<dom-module id="first-el">
  <template>

    <br> firstName should change on click:<br><br>
    firstName: <span>{{employees.employees.0.firstName}}</span>
    <br>
    <br>
    <button on-tap="tap_change_firstName_1">change firstName to: Test</button>


  </template>
  <script>
    (function() {
      'use strict';

      Polymer({
        is: "first-el",

        properties: {
          employees: {
            type: Object,
            notify: true,
          },
        },

        //domReady:
        attached: function() {
          this.async(function() {

                console.log('first: domReady:');
                this.employees = {
                  "employees": [{
                    "firstName": "John",
                    "lastName": "Doe"
                  }]
                };
          });
        },

        tap_change_firstName_1: function() {

              console.log('First: tap_change_firstName_1');
              //update array item property
              this.set('employees.employees.0.firstName', 'Test');

              console.log('New value:');
              console.log(this.employees.employees[0].firstName);
              //here the value is cnahged but that does not reflect in the DOM

        },

      });
    })();
  </script>

</dom-module>

<!-- use the element -->
<first-el></first-el> 

单击时应更改名字：


名字：{{employees.employees.0.firstName}




将firstName更改为：Test
（功能（）{
"严格使用",；
聚合物({
是：“第一个el”，
特性：{
雇员：{
类型：对象，
通知：正确，
},
},
//多姆雷迪：
附：函数（）{
this.async（函数（）{
log（'first:domReady:'）；
这是我的雇员={
“雇员”：[{
“名字”：“约翰”，
“姓氏”：“能源部”
}]
};
});
},
点击\u更改\u名字\u 1:函数（）{
log（'First:tap_change_firstName_1'）；
//更新数组项属性
此.set（'employees.employees.0.firstName'，'Test'）；
log（'新值：'）；
console.log（this.employees.employees[0].firstName）；
//这里的值是cnahed，但这并不反映在DOM中
},
});
})();

更新：

（）元素也可用于此任务。

set（）便利函数仅将属性设置器和

notifyPath

调用封装在一起。当您的数据是这样一个数组时，我相信

notifyPath

期望的是上层数组本身，而不仅仅是它的一个片段

解决此问题的一种方法（可能有几种）是在直接设置属性后让

notifyPath

自己调用

this.employees.employees[0].firstName = 'Test';
this.notifyPath('employees.employees', this.employees.employees);

---

请参阅新建。

上层解决方案仅适用于一项更改，不适用于多个“名称”更新，例如：

正确的解决方案，来自文档：在此

{{arrayItem（myArray.*，0，'name'）}
...
//第一个参数是数组更改的更改记录，
//change.base是绑定中指定的数组
arrayItem:函数（更改、索引、路径）{
//get（path，root）返回路径的值
//相对于根对象。
返回这个.get（path，change.base[index]）；
},
...
//更改子属性
this.set（'myArray.1.name'，rnd_firstName）；

谢谢，这很有效！请注意，如果导入来自CDN链接，set（）可以正常工作-从“href=”顶部注释掉导入。。。“@GoceRibeski，这是一个伟大的捕获！我喜欢亲自调用

notifyPath

，这会让我有更多的控制权。更改值只是普通的调用，您可以在完成所有操作后通知Polymer，而不是每次。

<div>{{arrayItem(myArray.*, 0, 'name')}}</div>
...
// first argument is the change record for the array change,
// change.base is the array specified in the binding
arrayItem: function(change, index, path) {
        // this.get(path, root) returns a value for a path
        // relative to a root object.
        return this.get(path, change.base[index]);
},
...
// change a subproperty
this.set('myArray.1.name', rnd_firstName);