Expressions with tokenList, styleObject filters don't update dynamically

[arthurevans]

With an expression like:

{{ classes | tokenList }}

The expression doesn't update when one of the values inside classes is updated. For example you might expect to be able to toggle the 'selected' class like this:

this.classes.selected = !this.classes.selected

However, since the properties of classes aren't observed, the change isn't detected.

Test case:

http://jsbin.com/qamat/12/edit

The Broken Switch button (which updates the property) doesn't trigger a change to the binding.

The Working Switch button (which clones the object) does trigger a change.

May be related to the issues mentioned in PR #23, of knowing which values to observe.

[rafaelw]

Thanks for tracking this down

[warpech]

+1

[robdodson]

Related SO question

[peterwmwong]

+1

[roibh]

<div class="{{ {selected: classes.selected} | tokenList }}">The Magic Div</div>

[silenceisgolden]

+1

[plato-cambrian]

+1

[sorvell]

@jmesserly is this perhaps related? https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/polymer-dev/fTOKXcOT_3U/qqlV1l5Be3IJ

[kennyjwilli]

+1

[jmesserly]

one possibility is addressing this at the filter level, by having some filters that work more like "array views" and are live.

we could also observe the props of all the values ("classes" in above), but that adds more things we're Object.observing. Going to need to investigate what the perf implication of that is.

[plato-cambrian]

Is this triple binding of polymer models <> DOM <> angular ng-models any help?
https://github.com/eee-c/angular-bind-polymer

[steren]

Hi,
I think I see this problem, but when the parameter of one of my filter is an object or array: changing one of its properties does not trigger an expression refresh.

In this codepen: http://codepen.io/anon/pen/azJeEL?editors=101
You can see that the last repeat expression is not correctly filtered, because one of its filter takes an array in parameter, and that only one element of this array is modified.

[ianbibby]

+1

[MetaMemoryT]

👍

[mattyclarkson]

This is a real problem. For example you cannot do the following:

this.pages = ['over', 'there'];

<p>Sorry, but the page <code>{{pages | join('/')}}</code> doesn't exist.</p>

join: function(array, delimiter) {
  return array.join(delimiter);
},

When the array changes the filter doesn't get updated resulting in an incorrect message.

I would happily tackle a PR if someone can point me in the right direction. Any tips, @rafaelw or @jmesserly ?

[dapullar]

+1

[shal1y]

👍
Right now the "filter" works more like a modifier. Filters are supposed to "filter" data/object/something... This would be amazing to have..