聚合物数据绑定未在阵列突变时更新

Question

我注意到 Polymer 中的 template/data-binding 似乎没有反映数组属性何时发生突变（即 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 按钮时，一个项目 "Push" 应该添加到 myArray，但它没有反映在模板 [[jsonStringify(myArray)]] 中。这是预期的行为吗？无论如何要解决这个问题？

Answer 1

Array change observer有点棘手。在您的代码中，通过使用 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 data-binding not updated on array mutation

polymer

polymer-1.0