Polymer1.0 監聽屬性值的變化

若是須要監聽屬性值變化能夠經過給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('屬性值已改爲' + this.say);
    }
  })
</script>

當屬性值發生改變時，就會觸發這個回調函數，注意只有你一開始寫了value這個屬性就會觸發一次，另外若是值沒有改變也是不會執行的。

能夠在listeners裏面寫事件，值爲一個回調函數，寫法和js同樣，去掉on。

另外發現attrChange函數裏面的第一個值爲say

attrChange:function(e){
  console.log(e);
  console.log('屬性值已改爲' + this.say);
}

這種方法只能觀察一個屬性，若是須要觀察多個屬性的變化，能夠用更爲複雜的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 = '老王';
      this.age = 25;
      this.sex = '男';
    },
    observers:[
      'updataSay(userName,age,sex)'
    ],
    updataSay:function(userName,age,sex){
      console.log(userName,age,sex);
    }
  })
</script>

observers值是一個數組，數組裏面能夠寫回調函數， 'updataSay(userName,age,sex)'意思是當userName&&age&&sex都改變的時候纔會執行這個方法。

若是隻須要監聽age和sex改變時就發生能夠這樣寫。

updataSay(age,sex)

若是隻寫一個，那麼和observer是同樣的。

監聽一個對象的屬性變化

<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':'請輸入內容'};
        }
      }
    },
    observers:[
      'userNameChanged(user.name)'
    ],
    userNameChanged: function(name) {
      console.log('new name: ' + name);
    }
  })
</script>

監聽數組的值變化

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

經過傳遞splices咱們能夠查看數組裏面的詳細信息

index：指數，push的當前值 removed： 刪除的數量 addedcount：插入的項目數。 object：項目 type：類型