阵列突变未更新聚合物数据绑定答案

【问题标题】：Polymer data-binding not updated on array mutation阵列突变未更新聚合物数据绑定
【发布时间】：2017-06-10 09:18:39
【问题描述】：

我注意到 Polymer 中的模板/数据绑定似乎没有反映数组属性何时发生突变（即push()）。示例代码如下：

<body>
  <dom-module id="my-element">
    <template>
      <pre>
[my-element]
myArray: [[jsonStringify(myArray)]]
      </pre>
    </template>
  </dom-module>

  <my-element id="elm"></my-element>
  <button onclick="pushArray()">pushArray</button>
  <button onclick="setArray()">setArray</button>

  <script>
    (function registerElements() {
      Polymer({
        is: 'my-element',

        properties: {
          myArray: {
            type: Array,
            value: function () {
              return [];
            }
          }
        },

        pushArray: function(value) {
          this.push('myArray', {id: value});
        },

        setArray: function(value) {
          this.set('myArray', [{id: value}]);
        },

        jsonStringify: function(obj) {
          return JSON.stringify(obj);
        }
      });
    })();

    function pushArray () {
      var elm = document.querySelector('#elm');
      elm.pushArray('Push');
    }

    function setArray () {
      var elm = document.querySelector('#elm');
      elm.setArray('Set');
    }
  </script>
</body>

每当我单击pushArray 按钮时，myArray 中应添加一个“推送”项，但模板[[jsonStringify(myArray)]] 中没有反映。这是预期的行为吗？无论如何要解决这个问题？

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

数组变化观察器有点棘手。在您的代码中，通过使用myArray，您隐式地观察（仅）对（整个）数组的引用，该引用仅在您运行setArray 时发生变化。

为了克服这个问题，你还必须使用深度观察者，即myArray.*。因此，dom-module 的正确代码如下：

  <dom-module id="my-element">
    <template>
      <pre>
        [my-element]
        myArray: [[jsonStringify(myArray, myArray.*)]]
      </pre>
    </template>
  </dom-module>

现场演示：http://jsbin.com/yulivuwufu/1/edit?html,css,output

无需更改其他代码。

【讨论】：

我认为通过使用 Polymer 的 push()（而不是 JS 原生的 push()）已经使 myArray 变化可观察？我错过了什么吗？
你没有错过任何东西。你确实需要使用 Polymer 的push()，否则即使我的解决方案也行不通。但正如我所说，数组突变不会触发数组对象本身的更改，因此您必须使用其他选项：深度观察者myArray.*，数组长度观察者myArray.length，或拼接观察者myArray.splices。