Iron-list not update after element property changed

Question

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/

score 0 · Accepted Answer · answered Mar 02 '17 at 15:36

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.

Omg... can't believe it was so obvious. You save my day (and probably my job :)) THANKS! — atl3, Mar 02 '17 at 15:58
You're welcome! Glad it worked, don't forget to mark the answer so when someone else comes along they can get help too! — Charlie Kelmeckis, Mar 02 '17 at 16:00

Iron-list not update after element property changed

1 Answers1