聚合物，绑定到数组项不起作用

Question

在此示例中 (Plunk) 属性和数组项之间存在绑定。

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>

更新：

array-selector (simple example) 元素也可以用于此任务。

Answer 1

set() 便捷函数只是将属性 setter 和 notifyPath 调用封装在一个函数中。当您的数据是这样的数组时，我相信 notifyPath 期待的是上层数组本身，而不仅仅是它的一个片段。

解决它的一种方法（可能有几种）是让 notifyPath 在直接设置属性后调用自己。

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

查看新内容 Plunker。

Answer 2

上面的解决方案仅适用于一次更改，不适用于多次 'name' 更新，示例：Plunk

正确的解决方案，来自文档：在这个 Plunk

Explicit bindings to array items by index isn’t supported

<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);

聚合物，绑定到数组项不起作用

Polymer, binding to array items not working

polymer

polymer-1.0