聚合物中数据绑定到阵列

我正在学习高分子。我试图绑定一个数组到我的UI。数组中的每个对象都有一个会改变的属性。我需要我的UI在属性值改变时更新。我已经定义了我的聚合物组件如下:

my-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. 当我点击Test按钮时，状态的更新不会反映在屏幕上。

当我看一切的时候，对我来说都是正确的。但是，从行为中可以清楚地看出，数据绑定没有正确设置。我做错了什么?事实上，items.length和数组中所有项目的初始渲染让我真的很困惑。