Polymer 1.0 Array Observers on Binding Change答案

【问题标题】：Polymer 1.0 Array Observers on Binding ChangePolymer 1.0 Array Observers on Binding Change
【发布时间】：2015-12-21 05:11:04
【问题描述】：

我正在尝试观察传递给 Polymer 元素的对象数组的变化。当向数组中添加新项时，Polymer 元素中的数组也会发生变化。但是，观察者方法永远不会被调用。

包含元素

<dom-module is="table-container">
  <template>
    <selectable-table table-items="{{items}}"></selectable-table>
    <button on-click="addItem">Add Item</button>    
  </template>
  <script>
    Polymer({
      is : "table-container",
      attached : function() {
        this.items = [];
        for (var i = 0; i < 3; i++) {
          this.push("items", {
            numerical: "1",
            english: "one"
          });
        }
      },
      addItem : function() {
        this.push("items", {
          numerical: "3",
          english: "three"
        })
      }
    })
  </script>
</dom-module>

在这里尝试观察变化：

<dom-module id="selectable-table>
  <template>
    <div>{{tableItems}}</div>
  </template>
  <script>
    Polymer({
      is : "selectable-table",
      properties : {
        tableItems: {
          type: Object,
          notify: true,
          observer: "updateTableItems"
        }
      }
      updateTableItems : function() {
        // Updates here
      }
    });
  </script>
</dom-module>

“updateTableItems”方法在第一次填充项目数组时被调用，但在单击按钮添加更多对象时不会被调用。

【问题讨论】：

标签： javascript polymer web-component polymer-1.0 custom-element

【解决方案1】：

要观察数组的变化，请使用以下观察者样式。

Polymer({
  is : "selectable-table",
  properties : {
    tableItems: {
      type: Array,
      notify: true,
    }
  },

  observers: [
      'updateTableItems(tableItems.*)'
  ],
  updateTableItems : function() {
    // Updates here
  }
});

因为tableItems 是一个对象数组，所以您应该在属性声明中使用Array 类型。如果您将新数组实例分配给tableItems 属性，您使用的观察者类型只会触发。对于数组的操作，将您的回调添加到observers。您可以在docs找到更多详细信息。

【讨论】：