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

如果这样做，则value父元素的test-app属性应与test-input s value属性同步。

Answer 1

在控制台中注意此警告：

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

在PP了解test-app之前，

test-input使用test-input。必须在声明该元素之前声明所有元素的依赖项。将test-input移到test-app之上，它会按预期运行。

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

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

1 个答案: