Polymer two-way data-binding not working

Question

I've an issue where I update a value in the child element which doesn't propagate to the parent

So, I've 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>

DEMO

What I expected is that the value typed in the input field should be displayed within the parent template behind

<p>PARENT, Foo is: {{foo}}</p>

Any suggestions what I might be doing wrong here ?

Answer 1

The warning message in the browser console gives us a hint:

Attributes on my-child were data bound prior to Polymer upgrading the element. This may result in incorrect binding types.

The solution: just change the order of the two elements. You need to declare the child element before the parent element (in most cases this problem doesn't occur, because you import the child element before its usage).

Answer 2

It actually works just fine. Go to http://ele.io and try it

UPDATE: I actually see now the eror. Previous solution is the correct one. The definition order