Question

我注意到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)]]中。这是预期的行为吗？无论如何要解决这个问题？

Answer 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

无需更改其他代码。

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

1 个答案: