数据绑定到聚合物中的数组

Question

I'm in the process of learning Polymer . I am trying to bind an array to my UI. Each object in the array has a property that will change. I need my UI to update when the property value changes. I've defined my Polymer component as follows:

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>

The component renders. However, the bindings do not work at all.

1. The line with {{ items.length }} does not show a count. Its basically just an empty h2 element.
2. The first item gets rendered in the list. However, the second one does not.
3. When I click the Test button, the update to the status is not reflected on the screen.

When I look at everything, it looks correct to me. However, it is clear from the behavior that the data-binding is not setup properly. What am I doing wrong? The fact that items.length and the initial rendering of all of the items in the array has me really confused.

Answer 1

Polymer data binding system works like this:

If the declared property changes (for example adding a new item) then it will detect the change and update your DOM.

However Polymer won't monitor changes inside your property (For performance/compatibility reasons).

You need to notify Polymer that something inside your property changed. You can do that using the set method or notifyPath .

Eg (From the polymer data binding section )

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

Answer 2

You can also add an observer if you want to do something when your array is updated.

Polymer 1.0 properties Documentation

And I think you should also add a notify:true to your property

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