Polymer 1.0 Observers from an array when binding changes

Question

I am trying to observe changes in an array of objects that are passed to a Polymer element. When a new element is added to the array, the array also changes in the Polymer element. However, the observer method is never called.

Containing element

<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> 

Trying to see the changes here:

 <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> 

The "updateTableItems" method is called first when the array of elements is first filled, but never when the button is pressed to add more objects.

Answer 1

To observe changes in an array, use the following observer style.

 Polymer({ is : "selectable-table", properties : { tableItems: { type: Array, notify: true, } }, observers: [ 'updateTableItems(tableItems.*)' ], updateTableItems : function() { // Updates here } }); 

Since tableItems is an array of objects, you must use the Array type in the property declaration. The type of observer that you use will only be triggered when a new array instance is assigned to the tableItems property. To manipulate the array, add the observers callback. You can find more information in the docs .