Polymer 1 nested dom-if within dom-repeat not updating when data changes

6
votes

How do you make dom-if templates within dom-repeat's update when the data changes??

Example here http://jsbin.com/xatala/edit?html,output

In the example the data changes after 1.5 seconds but the dom-if's inside the template aren't re-evaluated/rendered. You can see this in the console.log. The data has changed but the view isn't updated.

How would you make this work and what is the reasoning behind it?!

1
polymerpolymer-1.0
Have a look at this question. Your problem is not directly related to dom-if or dom-repeat, but rather about updating Arrays and Objects in Polymer. - Maria
Thanks @Maria, that's a helpful pointer... it's difficult in my situation as I'm manipulating data outside of element... will have to re-evaluate the way I'm doing it. - markstewie
Does this.set('myItems.1.isGood', true); not work? This allows Polymer to know you are setting a property within a specific array item. This isn't practical in all situations, admittedly. - Max Waterman

1 Answers

4
votes

Here is example that works: http://jsbin.com/nejadibuju/edit?html,console,output

<template is="dom-if" 
  if="{{arrayItem(myItems.*, index, 'isGood')}}">
      [[item.title]] is SOOO good.
</template>

What you were missing is:

Explicit bindings to array items by index isn’t supported

Some explanations are added in the Bin. Related links:

Polymer, binding to array items not working

http://plnkr.co/edit/aOmw4e?p=preview