I'm dynamically generating paper-checkbox elements by using dom-repeat with items from a data array. Updating the array the checkboxes correcly update, but Polymer does not reset the checked attribute to false. So, if the data changes, the checkboxes correctly update, but they remain checked.
It seems to me that dom-repeat reuses previous created checkboxes by simply changing their attributes. So, when the user clicks on the first checkbox, it remains checked also when dom-repeat regenerate the list of paper-checkbox.
Below the code which generates the issue (I tested it only with Chrome). If you check the first checkbox and then click on the "Random Items" button, the first checkbox remains checked.
How do I can avoid it? I tried to place the checked attribute to false (checked=false) but it does not work. Of course it can be done via javascript, but I desire to avoid it.
Thanks
Polymer({
is: "wc-rnd-checkboxes",
properties: {
data: { type: Array, value: [1, 2, 3, 4, 5] }
},
handleRndGenerator: function() {
this.data = [];
var length = Math.floor((Math.random() * 5) + 1)
for (i=0; i < length; i++) {
var irnd = Math.floor((Math.random() * 10) + 1);
this.data.push(irnd);
}
}
});
<script src="http://ift.tt/1PEpleq"></script>
<link rel="import" href="http://ift.tt/1MrQBsQ" />
<link rel="import" href="http://ift.tt/1PEples" />
<dom-module is="wc-rnd-checkboxes">
<template>
<paper-button on-click="handleRndGenerator">Random Items</paper-button><br />
<template is="dom-repeat" items="{{data}}">
<paper-checkbox></paper-checkbox>
<span>{{index}}</span>
<br />
</template>
</template>
</dom-module>
<h3>Polymer Dom-repeat and paper-checkbox</h3>
<p>
<b>Instructions:</b>
<ol>
<li>click on the first checkbox;</li>
<li>click on generate "Random Items";</li>
<li>Issue: Polymer does not uncheck the first checkbox</li>
</ol>
</p>
<wc-rnd-checkboxes></wc-rnd-checkboxes>
Ce commentaire a été supprimé par l'auteur.
RépondreSupprimer