Odd behavior when looping over a filtered object

538 views
Skip to first unread message

Ionel Maries Cristian

unread,
Sep 9, 2014, 7:17:28 PM9/9/14
to polymer-dev
Hello,

It appears that if I add a filter in a repeating template (like <template repeat="{{ item in data|myfilter }}">) it will break the databindings (dom doesn't get updated on data changes).

It also appears there's a similar issue when filters are used inside the template (like {{ myvar|myfilter }}).

I have example code reproducing the issue here: http://jsbin.com/qivaje/1/edit

Is this a bug or I'm doing something wrong?


Thanks,
-- Ionel
M.

Eric Bidelman

unread,
Sep 9, 2014, 9:23:42 PM9/9/14
to Ionel Maries Cristian, John Messerly, polymer-dev
Hi Ionel, 


From Steve:
....Polymer does not currently observe object or array mutations directly as dependencies. However, if a property that is an object or array itself changes, this will be noticed. 

There is one exception to this which is an array that is repeated. That array is observed for array mutations (additions/removals)....

So even if you just have <p>items(buggy): {{ data }}</p>, the value won't update when you remove an item. The data array itself is not changing. <p>items: {{ data.length && data|json }}</p> works because the data's .length property is a dependency in the expression. When the array is mutated, data.length changes, thus evaluating the expression. See the explanation in the last paragraph here

One workaround is to re-evaluate the expression using this approach:

    <template repeat="{{ item in data | addone }}" if="{{data.length}}">

or do a full re-assignment of the array at the right time:

    this.data = this.data.splice(0);

Example: http://jsbin.com/dadelituniya/1/edit. Removing an item will update the the view. The second example updates when the "reassign" button is pressed.


Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CANkHFr_vPurzhxEe1o11Qt-cxLrCDy%3DC5wrFQE%2B_us%2BfNLXSBw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

John Messerly

unread,
Sep 9, 2014, 9:30:46 PM9/9/14
to Eric Bidelman, Ionel Maries Cristian, polymer-dev
Reply all
Reply to author
Forward
0 new messages