If you need to listen for property value changes, you can assign a callback function to observer.

<say-Hello></say-Hello>
<dom-module id="say-Hello">
  <template>
    <h1>{{say}}</h1>
  </template>
</dom-module>
<script>
  Polymer({
    is:'say-Hello',
    properties:{
      say:{
        type:String,
        value:'hello',
        observer:'attrChange'
      }
    },
    listeners:{
      'click':'setAttr'
    },
    setAttr:function(){
      this.say = 'attr';
    },
    attrChange:function(){
      console.log('Property value changed to' + this.say);
    }
  })
</script>

When the property value changes, the callback function will be triggered. Note that only when you write the value property at the beginning, it will be triggered once. In addition, if the value does not change, it will not be executed.

You can write events in listeners as a callback function. The writing method is the same as js. Remove on.

In addition, it is found that the first value in the attrChange function is say

attrChange:function(e){
  console.log(e);
  console.log('Property value changed to' + this.say);
}

This method can only observe one attribute. If you need to observe the changes of multiple attributes, you can use more complex observers

<say-Hello></say-Hello>
<dom-module id="say-Hello">
  <template>
    <h1>{{userName}}</h1>
  </template>
</dom-module>
<script>
  Polymer({
    is:'say-Hello',
    properties:{
      userName:String,
      age:Number,
      sex:String
    },
    attached:function(){
      this.userName = 'Lao Wang';
      this.age = 25;
      this.sex = 'male';
    },
    observers:[
      'updataSay(userName,age,sex)'
    ],
    updataSay:function(userName,age,sex){
      console.log(userName,age,sex);
    }
  })
</script>

The observers value is an array, in which a callback function can be written. 'updataSay(userName,age,sex)' means that this method will be executed when the username & & Age & & sex changes.

This can be done if you only need to listen for age and sex changes.

updataSay(age,sex)

If only one is written, it is the same as observer.

Listen for property changes of an object

<say-Hello></say-Hello>
<dom-module id="say-Hello">
  <template>
    <input value="{{user.name::input}}">
  </template>
</dom-module>
<script>
  Polymer({
    is:'say-Hello',
    properties:{
      user: {
        type: Object,
        value: function() {
          return {'name':'Please enter content'};
        }
      }
    },
    observers:[
      'userNameChanged(user.name)'
    ],
    userNameChanged: function(name) {
      console.log('new name: ' + name);
    }
  })
</script>

Listen for changes in array values

<x-custom></x-custom>
<script>
  Polymer({
    is: 'x-custom',
    properties: {
      users: {
        type: Array,
        value: function() {
          return [];
        }
      }
    },
    observers: [
      'usersAddedOrRemoved(users.splices)'
    ],
    usersAddedOrRemoved: function(changeRecord) {
      if(!changeRecord)return;
      console.log(changeRecord);
    },
    ready: function() {
      this.push('users', {name: "Jack Aubrey"});
    },
  });
</script>

We can see the details in the array by passing the tiles

Index: index, the current value of push
removed: number of deleted
addedcount: number of items inserted.
object: Project
Type: type