I am writing a sample program in polymer. I have a template as shown below:
<template is="dom-repeat">
<li class="clearfix title-container">
<input type="checkbox" checked="{{item.checked::change}}" class="checkbox-container float--left" />
<label class="label-container">{{item.id}}</label>
</li>
</template>I have a button as shown below on click of which function f1() is called:
<button on-click="f1">Save</button>Initially all the checkboxes are checked. The user might uncheck some of the checkboxes and then click on the button. f1() collects all the elements that have been checked by the user. After execution of f1, I want all the checkboxes to be checked again. The code for f1() is shown below:
//Collect all the selected items in a separate array.
//Revert unchecked checkboxes to checked.
f1: function() {
newIndex = 0;
for (index = 0; index < this.dataArray.features.length; index++) {
if (this.dataArray.features[index].checked) {
this.newDataArray.selectedElements[newIndex++] = this.dataArray.features[index];
} else {
this.dataArray.features[index].checked = true;
}
}
}The following is the definition of dataArray element (I just printed it in a console):
//The dataArray when printed in a console
{
type: "FeatureCollection",
features: Array(4)
}
features: Array(4) 0: {
type: "Feature",
checked: true
}
1: {
type: "Feature",
checked: true
}
2: {
type: "Feature",
checked: true
}
3: {
type: "Feature",
checked: true
}The problem I am facing is that after f1() executes the changes made to the checked property are not reflected in the UI even though I have assigned all the values in the array to be checked. I have read about sub-properties not being reflected directly but I don't understand how do I use a notifyPath() here or how do I use the array mutation methods. Any help is appreciated.
