Polymer two-way communication does not work
I have a problem when I update a value in a child that is not propagated to the parent
So, I have two polymer elements; my-parent and my-child
<polymer-element name="my-parent">
<template>
<p>PARENT, Foo is: {{foo}}</p>
<my-child bar="{{foo}}"></my-child>
</template>
<script>
Polymer('my-parent', {});
</script>
</polymer-element>
<polymer-element name="my-child" attributes="bar">
<template>
<input value="{{bar}}">
<p>CHILD, bar is {{bar}}</p>
</template>
<script>
Polymer('my-child', {
bar: ''
});
</script>
</polymer-element>
I expected that the value entered in the input field should appear in the parent template for
<p>PARENT, Foo is: {{foo}}</p>
Any suggestions on what I might be doing wrong here?
source to share
A warning message in the browser console gives us a hint:
The attributes on my-child were data bound before the Polymer element was updated. This can lead to incorrect binding types.
Solution: just change the order of the two elements. You need to declare the child in front of the parent (in most cases this issue does not occur since you are importing the child before using it).
source to share
In fact, everything works fine. Go to http://ele.io and try
UPDATE: Actually I can see that it is now erotic. The previous solution is correct. Determination procedure
source to share