自定义元素之间的聚合物双向绑定[包括示例]

Question

我正在尝试在自定义元素中制作自定义元素，并让内部自定义元素能够从内部更改其值，而让外部自定义元素能够在更改时同步其绑定。 我该怎么做才能使它正常工作？

我已经对文档进行了彻底的搜索，但是在这个部门中它非常乏善可陈。 我相信Node.bind（）可能引起人们的兴趣，但不确定在这种情况下如何应用。

这是一个简化的测试用例和插件演示：

  <polymer-element name='test-app'>
       <template>

           First:
           <test-input id='one' value='{{value}}'></test-input>

           <br/>
           <br/>

           Second:
           <test-input id='two' value='{{value}}'></test-input>

           <br/>
           <br/>

           Value:
           {{value}}
       </template>
       <script>
           Polymer({ 
               value: 5
           })
       </script>
   </polymer-element>

   <polymer-element name='test-input'>

       <template>

           <style>
               #val {
                   font-size: 50px;
               }
           </style>

           <div id='val'>{{value}}</div>

           <button on-tap='{{increment}}'>+</button>
           <button on-tap='{{decrement}}'>-</button>

       </template>

       <script>
           Polymer({

               publish: {
                   value: 4
               },
               increment: function() {
                   this.value = this.value + 1;
               },
               decrement: function() {
                   this.value = this.value - 1;
               }
           })
       </script>
   </polymer-element>

   <test-app></test-app>

http://plnkr.co/edit/KjQ9DusaFg2jp1BTFUde?p=preview

如果可行，则test-app父元素的value属性应该与test-input的value属性都同步。

Answer 1

在控制台中注意以下警告：

测试输入的属性是在Polymer升级元素之前绑定数据的。 这可能会导致错误的绑定类型。

在Polymer知道test-input之前， test-app使用test-input 。 必须在声明该元素之前声明所有元素的依赖项。 将test-input移至test-input test-app上方，即可正常工作。

http://plnkr.co/edit/ZaIj60S3lAHT18k5T3sn?p=preview