Array changes don't propagate into dom-if=false

[andrey-git]

Description

When array property is bound to sub-element under dom-if, then changes in the array don't propagate to sub-element if dom-ifcondition is false. Then, when dom-if condition becomes true the binding becomes out of sync.

Live Demo

http://jsbin.com/pasuwapoxo/1/edit?html,console,output

Steps to Reproduce

Example:

1. See jsbin and repeatedly click on the red rectangle
2. The value propagates only when dom-if is true and the visual value is out of sync with the real value printed to the log.

Browsers Affected

• Chrome
  Didn't check others.

Versions

• Polymer: v2.0.2

[AlphaWong]

It seems only happen in Polymer.Element
live-demo: http://jsbin.com/vesuzifobi/edit?html,console,output

<p>tag behaviours as your expected.

It might cause by Polymer.Element issue.

Sent from my Htc HTC U11 using FastHub

[bigfanjs]

Hello my friend.

I don't know if you tried this before. But there is a less performant way to solve this by setting the restamp property to true which entirly removes the stamped content from and re-create and add them back to the DOM.

<template is="dom-if" if="[[ b ]]" restamp="true">
   <inner-element prop="[[ p ]]"></inner-element>
</template>

[andrey-git]

Yes, this will work.

In my code I switched to just setting display: none instead of using dom-if, but a bug is still worth reporting :)

[bigfanjs]

Well done! And yes you're right ^__^

[sorvell]

That dom-if does not update bindings when the if is false is by design. This was a requested enhancement that was added in Polymer 2.x.

When the if is true, we "sync" any values that need to be updated. Unfortunately, when an object is passed like this, it dirty checks and does not update. There are currently 2 workarounds for this: (1) use restamp on the dom-if causing it to re-render when the if becomes true or (2) use the Polymer.MutableData mixin on the element that should update (MyInnerElement in this case).

We'll leave this open since we'd like to investigate a better way to address this issue.

[sorvell]

After consideration, we've decided we cannot fix the core issue here since it doing so requires modification of Polymer.PropertyEffect's basic data propagation mechanism and this would be too much of a breaking change.

As noted, restamp="true" can use used to avoid the issue here.

However, we recommend using immutable data patterns to have more control over how data propagates between elements. We plan to provide some helpers around working with immutable data, see: #5126.