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

时间:2017-06-10 09:18:39

标签: polymer polymer-1.0

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

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

无需更改其他代码。