Template will not update when data is changed AND put through a filter

[Kenny Williams]

I have a template repeat, shown below:

<template repeat="{{ data | removeEmpty}}">

<div>

  <paper-input label="{{ [0] }} input description" required floatingLabel></paper-input>

 </div>

</template>

This template works fine for when the data is updated through actually setting the data to be a different value so the initial render works fine going through the filter. 

I updated the two-way bound variable data by changing the input of a text box which effectively DOES change the data. Now that the data has been changed, the template should re-render. It does not. 

Now if I take the filter, removeEmpty, off the template will update. Is this a bug in polymer?

[Silver Techar]

Hi,

I've experienced almost the same problem and I've read somewhere that this is not supported with filters and complex objects.

I'd suggest you do:

<template repeat="{{data}}">
    <template if="{{data.isNotEmpty}}">
        <div></div>
    </template>
<template>

Also, you're not allowed to have spaces in {{}}. Try first without.

Moreover, I think that your template repeat needs to be within another template.

Kr,
Techar

[Steve Orvell]

May be related to this https://github.com/Polymer/polymer-expressions/issues/28. We're looking into it. Feel free to post a specific issue here: https://github.com/Polymer/polymer-expressions/issues.

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/5ded785b-0e46-4315-96ca-da395e823f50%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Kenny Williams]

Yes I do believe that is the exact issue I am having. However, I am not sure how Polymer changes the data when it is bound to the value of a text box. If it appends the string then this has to be it. If it actually sets the value then it seems Polymer should know about it. 

It is interesting though because I never directly bound the value of the text box to the data. Polymer simply knew that it was in a repeat and where each text box's value should be in relation to the data and wired it all up itself. 

[Steve Orvell]

Just to clarify, 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. Here is an example: http://jsbin.com/qozuc/1/edit.

There is one exception to this which is an array that is repeated. That array is observed for array mutations (additions/removals). We're investigating generalizing this behavior such mutations to properties of objects/arrays can be dependencies.

[Kenny Williams]

This is what I am talking about. http://jsbin.com/zizoqu/3/edit

That example has a filter applied to the data and the data does not change when you modify the text box. If you removed that filter you can see that the data does in fact change. 

[Steve Orvell]

Filters are one-way transforms. Here the data returned from `removeEmpty` is distinct from `this.data`. The values are here are strings so they are copied into the new array. When the input values change the value changes in the repeated data, but not the value in `this.data` as you note. There are no immediate plans to change this behavior.

There are two easy options for this type of use case: (1) don't use a filter, (2) take advantage of javascripts copy by reference feature for objects. 

Here's an example of this second approach: http://jsbin.com/bowab/1/edit.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ee782829-109c-4fe7-b082-a7f5fec05386%40googlegroups.com.