javascript - 自定义元素之间的 polymer 双向绑定(bind)[包括示例]

Question

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

我已经彻底浏览了文档，但这个部门的内容非常乏味。我相信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 同步s 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