Question

所以我有这个带有dom-repeat的Polymer元素。它正确绑定。但是，当修改数组时，它不会反映回DOM。点击按钮后没有任何变化。

<dom-module id="my-element">
  <template>
    <template is="dom-repeat" id="allRules" items="{{allRules}}">
      <span class="tag" rule-enabled$={{item.enabled}}>{{item.name}}</span>
    </template>
    <button on-click="click">Click me</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: "my-element",

    properties: {
      allRules: {
        type: Array,
        notify: true
      }
    },

    click: function() {
      this.allRules[0].name = "three";
    },

    ready: function() {
      this.allRules = [
        {
          name: "one",
          enabled: true
        }, {
          name: "two",
          enabled: false
        }
      ]
    },

    setBind: function(bind) {
      this.bind = bind;
    }
  });
</script>

是否有像notifyArrayUpdated这样的方法告诉DOM更新绑定数据？

Answer 1

更改数组内的子属性时，需要执行

this.set('allRules.0.name', 'three');

查看array binding了解详情。

以下是plunker。

Polymer dom-repeat如何通知更新数组

1 个答案: