自定義元素之間的聚合物雙向綁定[包括示例]

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