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

Question

我正在尝试在自定义元素中创建自定义元素，并让内部自定义元素能够从内部更改其值，并且外部能够同步其对该更改的绑定。我该怎么做才能让它发挥作用？

我已经彻底搜索了文档，但在这方面非常乏味。我相信 Node.bind() 可能很有趣，但不确定它在这种情况下如何应用。

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

  <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

注意控制台中的这个警告：

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

test-app 在 Polymer 知道 test-input 之前使用 test-input。必须在声明该元素之前声明该元素的所有依赖项。将 test-input 移动到 test-app 上方，它按预期工作。

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

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

Polymer two-way binding between custom elements [example included]

javascript

polymer