数据绑定到聚合物阵列

Question

我正在学习Polymer。我正在尝试将数组绑定到我的用户界面。数组中的每个对象都有一个属性会改变。当属性值更改时，我需要更新我的UI。我定义我的高分子成分如下：

我-component.html

<dom-module id="my-component"> 
    <template> 
     <h1>Hello</h1> 
     <h2>{{items.length}}</h2> 
     <table> 
     <thead> 
      <tr> 
      <th>Name</th> 
      <th>Status</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr repeat="{{ item in items }}"> 
      <td>{{ item.name }}</td> 
      <td>{{ item.status }}</td> 
      </tr> 
     </tbody> 
     </table> 

     <br /> 

     <button on-click="testClick">Test</button> 
    </template> 

    <script> 
     // element registration 
     Polymer({ 
      is: "my-component", 
      properties: { 
       items: { 
        type: Array, 
        value: function() { 
         return [ 
         new Item({ name:'Tennis Balls', status:'Ordered' }), 
         new Item({ name:'T-Shirts', status: 'Ordered' }) 
         ]; 
        } 
       }     
      }, 

      testClick: function() { 
      for (var i=0; i<items.length; i++) { 
       if (items.name === 'Tennis Balls') { 
       items[i].status = 'Shipped'; 
       break; 
       } 
      }     
      } 
     }); 
    </script> 
</dom-module> 

组件呈现。但是，绑定根本不起作用。

1. 该行与{{ items.length }}不显示计数。它基本上只是一个空的h2元素。
2. 第一个项目在列表中呈现。但是，第二个不是。
3. 当我单击“测试”按钮时，状态的更新没有反映在屏幕上。

当我看到一切时，它对我来说都是正确的。但是，从行为中可以清楚地看到数据绑定没有正确设置。我究竟做错了什么？事实上，items.length和阵列中所有项目的初始渲染让我非常困惑。

Answer 1

聚合物数据绑定系统的工作原理是这样的：

如果（加入新的项目为例）声明的属性变化，然后它会探测到这一变化，并更新DOM。

但是聚合物不会监测的变化您的财产（出于性能/兼容性的原因）。

你需要通知聚合物，你的属性内的东西改变了。您可以使用集合方法或notifyPath来完成此操作。

E.g（从polymer data binding section）

this.set('myArray.1.name', 'Rupert'); 

Answer 2

您还可以，如果您要在阵列更新做一些补充的观察员。

Polymer 1.0 properties Documentation

而且我想你也应该添加一个通知：忠实于你的财产

items: { 
       type: Array, 
       notify:true, 
       value: function() { 
        return [ 
        new Item({ name:'Tennis Balls', status:'Ordered' }), 
        new Item({ name:'T-Shirts', status: 'Ordered' }) 
        ]; 
       } 
      }