Polymer 1, I have in iron-list:
<iron-list
id="ironList"
scroll-target="[[ironListScrollTarget]]"
items="[[itemCollectionCopy]]">
...
<div class="text center-justified info-icon">
<iron-icon
hidden="[[!_isDirtyData(item.*, itemCollectionCopy)]]"
role="img"
aria-label="Check-out information has been modified"
title="Check-out information has been modified"
icon="icons:info-outline"></iron-icon>
<iron-icon
hidden="[[_isDirtyData(item.*, itemCollectionCopy)]]"
role="img"
class="pristine-data"
aria-label="Check-out information has been modified"
title="Check-out information has been modified"
icon="icons:info-outline"></iron-icon>
</div>
_isDirtyData: function(item) {
console.log(item);
return item.base.preferences;
},
setCustomPreference: function(e) {
const id = e.detail.data.clientId;
const preferences = e.detail.data.preferences;
const foo = this.itemCollectionCopy.map((item) => {
if (item.client_id === Number(id)) {
item.preferences = preferences;
}
return item;
});
this.itemCollectionCopy = [];
this.itemCollectionCopy = [...foo];
},
When adding a preferences object to item.preferences
, I could not get the computed binding hidden="[[_isDirtyData(item.*)]]"
to detect a change. Instead, I had to add the whole array itemCollectionCopy
in hidden="[[_isDirtyData(item.*, itemCollectionCopy)]]"
which seems excessive.
Why wouldn't the computed binding detect a change with just hidden="[[_isDirtyData(item.*)]]"
?
The way polymer is observing changes in property is not perfect, and they added some array mutations methods to change array and notify templates of this changes.
You can use them if they work for your particular case.
https://polymer-library.polymer-project.org/1.0/docs/devguide/model-data#work-with-arrays
Sometime you want to perform operation in a JS way, or just there is no array mutation method adapted for your case.
There is a notifyPath method which can help also.
for example will trigger all corresponding observers.