数据绑定到 Polymer 中的数组

Question

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

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. 当我单击“测试”按钮时，状态更新不会反映在屏幕上。

当我查看所有内容时，我觉得它是正确的。但是，从行为中可以清楚地看出数据绑定没有正确设置。我究竟做错了什么？ items.length 和数组中所有项目的初始渲染让我很困惑。

Answer 1

聚合物数据绑定系统的工作原理如下：

如果声明的属性发生更改（例如添加新项目），那么它将检测到更改并更新您的 DOM。

但是，Polymer 不会监控您的属性内部的变化（出于性能/兼容性原因）。

您需要通知 Polymer 您的属性内的某些内容发生了变化。您可以使用 set 方法或 notifyPath 来做到这一点。

例如（来自polymer data binding section）

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

Answer 2

如果你想在你的数组更新时做一些事情，你也可以添加一个观察者。

Polymer 1.0 properties Documentation

我认为你还应该在你的属性中添加一个 notify:true

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