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:
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.
Polymer 1.0 :Work with Object and array data
Other:https://blog.csdn.net/github_38108899/article/details/82432315