Computed Binding Not Detecting Change in Iron List

Question

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.*)]]" ?

Answer 1

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.

this.notifyPath('myarray.*'); 

for example will trigger all corresponding observers.