數據綁定到聚合物陣列

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' }) 
        ]; 
       } 
      }