Связывание данных с массивом в полимере

Question

Я изучаю Polymer. Я пытаюсь связать массив с моим пользовательским интерфейсом. Каждый объект в массиве имеет свойство, которое изменится. Мне нужно, чтобы мой пользовательский интерфейс обновлялся при изменении значения свойства. Я определил мой полимерный компонент следующим образом:

мой-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 не будет отслеживать изменения внутри вашей собственности (по соображениям производительности/совместимости).

Вам необходимо уведомить Полимер, что что-то внутри вашей собственности изменилось. Вы можете сделать это, используя метод или notifyPath.

например (от 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' }) 
        ]; 
       } 
      }