Iron-list not update after element property changed

Asked By: Anonymous

I’m having problems re-rendering an iron-list after changing an item property.

I need iron-list to re-render to apply new classes just like it does when i push or splice items.

Already tried almost everything(notifyPath, resize, _update, …) but still doesn’t make it work.

Please help 🙂

Below you can find an jsfiddle to ilustrate:

work OK:

this.set('words.'+i+'.checked', true); 

NOT work:

this.notifyPath('words.'+i+'.checked');

http://jsfiddle.net/s6f029j3/23/

Solution

Answered By: Anonymous

I looked at your jsfiddle and made some changes. Try it now and see if this is what you were looking to do.

jsfiddle

I made changes to the function on the paper-list to have it see if it had been checked there, rather than in the actual function.

<iron-list id="list" items="{{words}}">
        <template>
            <paper-item class$='[[_computedClass(item.checked)]]'>
              <div>Item: [[item.name]] checked: [[item.checked]]</div>
            </paper-item>
        </template>
    </iron-list>

and in the function, here’s what I did:

_computedClass: function(e) {
            //WHY IT DOES NOT RE-RENDER AFTER CLICK????
        return (e) ? 'stuff_checked' : 'stuff_notchecked';
    },

By just removing the .checked it now works as intended.