In a Polymer custom element, can properties of items in a collection be observed for changes?

Question

I have a custom Polymer element which contains an array of items, rendering them as a table. I'm finding that when a property of an item in the array is changed, the display doesn't get updated.

There's a demonstration of the problem in the second of these example tables.

I suspect that it might be connected to the use of a repeat loop to render each property rather than specifying the actual property name in the template, so the path to the property doesn't get an observer attached?

I'm working round this by stringifying and re-parsing the item after one of its attributes changes, then splicing it back into the array, but this is obviously inefficient.

Is there a way to ensure that Polymer updates the display when a property of an item in a collection is changed?

Answer 1

I believe you're correct that only the top-level identifiers are observed for changes, not their properties. For example, if you have the expression:

{{ { article: article, field: field }} 

Only changes to article and field are detected -- changes to their properties, such as article.id are not.

In this case, I was able to get your example to work by replacing the expression & filter with:

{{ article[field] }}

Array access isn't documented as being supported in expressions, but that's apparently an oversight. I've opened a ticket to get the docs updated:

https://github.com/Polymer/polymer/issues/486