聚合物双向数据绑定不起作用

时间:2014-12-16 21:23:24

标签: javascript data-binding polymer

我遇到的问题是更新子元素中不会传播到父元素的值

所以,我有两种聚合物元素;我的父母和我的孩子

<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

我所期望的是输入字段中输入的值应显示在

后面的父模板中
<p>PARENT, Foo is: {{foo}}</p>

有什么建议我可能在这里做错了吗?

2 个答案:

答案 0 :(得分:3)

浏览器控制台中的警告消息为我们提供了一个提示:

  

my-child上的属性是在Polymer升级之前绑定的数据   元件。这可能会导致绑定类型不正确。

解决方案:只需更改两个元素的顺序即可。您需要在父元素之前声明子元素(在大多数情况下,此问题不会发生,因为您在使用之前导入子元素)。

答案 1 :(得分:1)

它实际上运作得很好。转到http://ele.io并尝试

更新:我实际上现在看到的是恐怖。以前的解决方案是正确的。定义顺序