Polymer 1.0 observers - not working on array

Question

I set an observer on to catch all polymer recognized events on an property that is an array, but I catch get it to catch the change. In my example below my observer function "bigup" only gets called on when the property, "bigs" is first initialzed.

<dom-module id="parent-page">
<template>
    <paper-button on-click="updateAll">Update</paper-button>
</template>
<script>
    var temp=[];
    temp.push({'conversation':[{'message':'hello'}]});

    Polymer({
        is: 'parent-page',
        properties: {
            bigs: {
                type: Array,
                value: temp
            }
        },
        observers: [
            'bigup(bigs.*)'
        ],
        updateAll: function(){
            this.bigs.push({'conversation':[{'message':'hola'}]});
            console.dir(this.bigs);
        },
        bigup: function(){
            console.log('big Up');
        }
    });
</script>

I also tried to use bigs.push in the observer but had no success. One part I don't understand is that if I add the following line to my "updateAll" function, the observer catches the change and fires "bigup".

this.bigs=[];

Answer 1

For me this article was helpful as well, it covers both the way to register the observer as well as the splices methods as suggested by Justin XL.

Registering the observer:

properties: {
    users: {
      type: Array,
      value: function() {
        return [];
      }
    }
  },

  observers: [
    'usersAddedOrRemoved(users.splices)'
  ],

Calling splices methods the Polymer 1.0 way:

this.push('users', 'TestUser');

https://www.polymer-project.org/1.0/docs/devguide/properties.html#array-observation

FYI - this will NOT work in all cases (my initial idea) When you register the observer in the property declaration like this:

 properties: {
        users: {
          type: Array,
          value: function() {
            return [];
          },
          observer: 'usersAddedOrRemoved'
        }
      },

In this case the usersAddedOrRemoved method is only called when you assign a new array to the users object. It will not however fire when you mutate the array by pushing, popping, splicing etc.

Answer 2

You need to use the push method from Polymer instead of doing this.bigs.push.

So replace that line of code with

this.push('bigs', {'conversation':[{'message':'hola'}]});

For more info have a look at this link.