Polymer 1.0バインディングの変更に関するオブザーバ

Question

Polymer要素に渡されるオブジェクトの配列の変更を監視しようとしています。新しい項目が配列に追加されると、配列はPolymer要素でも変更されます。ただし、オブザーバメソッドは呼び出されません。ここで変化を観察しようとする要素

<dom-module is="table-container"> 
    <template> 
    <selectable-table table-items="{{items}}"></selectable-table> 
    <button on-click="addItem">Add Item</button>  
    </template> 
    <script> 
    Polymer({ 
     is : "table-container", 
     attached : function() { 
     this.items = []; 
     for (var i = 0; i < 3; i++) { 
      this.push("items", { 
      numerical: "1", 
      english: "one" 
      }); 
     } 
     }, 
     addItem : function() { 
     this.push("items", { 
      numerical: "3", 
      english: "three" 
     }) 
     } 
    }) 
    </script> 
</dom-module> 

を含む

：

items配列が最初に読み込まれるときには、ボタンがクリックされていないんとき「updateTableItems」メソッドが最初に呼び出される

<dom-module id="selectable-table> 
    <template> 
    <div>{{tableItems}}</div> 
    </template> 
    <script> 
    Polymer({ 
     is : "selectable-table", 
     properties : { 
     tableItems: { 
      type: Object, 
      notify: true, 
      observer: "updateTableItems" 
     } 
     } 
     updateTableItems : function() { 
     // Updates here 
     } 
    }); 
    </script> 
</dom-module> 

より多くのオブジェクトを追加します。

Answer 1

アレイの変更を観察するには、次のスタイルのオブザーバを使用します。

Polymer({ 
    is : "selectable-table", 
    properties : { 
    tableItems: { 
     type: Array, 
     notify: true, 
    } 
    }, 

    observers: [ 
     'updateTableItems(tableItems.*)' 
    ], 
    updateTableItems : function() { 
    // Updates here 
    } 
}); 

tableItemsは、オブジェクトの配列ですので、あなたはあなたの財産宣言でタイプArrayを使用する必要があります。新しい配列インスタンスをtableItemsプロパティに割り当てると、使用するオブザーバのタイプはトリガされます。配列を操作するには、コールバックをobserversに追加します。 docsに詳細が掲載されています。