Polymer dom-repeat how to notify array updated

Question

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>

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

Answer 1

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

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

Check out array binding for details.

Here is a plunker for it.