CODEWITHSUNDEEP
javascriptpolymer
user70192
user70192

Reputation: 14214

Data Binding to Array in Polymer

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.

Upvotes: 1

Views: 3449

Answers (2)

Franck Murcia
Franck Murcia

Reputation: 1

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

Upvotes: 0

Hugo Zapata
Hugo Zapata

Reputation: 4484

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.

E.g (From the polymer data binding section)

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

Upvotes: 3

Related Questions