聚合物dom-repeat如何通知阵列更新 [英] Polymer dom-repeat how to notify array updated

问题描述

所以我有这个具有dom-repeat的Polymer元素.它正确绑定.但是，修改数组后，它不会反映回DOM.当我单击按钮时，什么都没有改变.

So I have this Polymer element with dom-repeat. It binds correctly. However, when the array is modified, it doesn't reflect back to DOM. Nothing changed when I click on the button.

<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更新绑定数据?

Is there a method like notifyArrayUpdated to tell the DOM to update binding data?

推荐答案

当您更改数组内的子属性时，您需要这样做

When you change a subproperty inside an array, you need to do

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

查看数组绑定有关详细信息.

这是一个朋克车.

这篇关于聚合物dom-repeat如何通知阵列更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！