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

Question

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?!

Deify

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. – Neuro

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. – Deify

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. – Parker

Answer 1

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

Fleecy

Thanks! That explains it pretty well. – Deify