BackboneJs笔记之事件管理

Backbone.Events模块的事件管理是通过提供对应的API来实现的。接下来逐一总结Backnone提供的API。

基本事件方法

on

给一个对象的自定义事件绑定触发该事件时执行的函数。

• 监听默认事件

  var person = Backbone.Model.extend({
      defaults: {
          name: '',
          sex: ''
      }
  });
  var man = new person();
  man.on("change", function(){
  	console.log("对象的默认值发生了变化。");
  });
  man.set("name", "栖溪阁晓生");

显示结果：

• 监听属性事件

  监听事件的同事还可以监听某个属性值得变化，使用过滤符冒号（ : ）来表示。

  var person = Backbone.Model.extend({
      defaults: {
          name: '',
          sex: '女'
      }
  });
  var man = new person();
  man.on("change",function(){
      console.log("对象的默认值发生了变化。");
  });
  // model：表示当前得数据模型对象
  // value: 表示冒号(:)后的属性修改后的值
  man.on("change:sex",function(model,value){
      console.log("您修改了性别属性值，最新值是： " + value);
  });
  man.set("sex", "男");

显示结果：

• 获取属性修改前的值

  var person = Backbone.Model.extend({
      defaults: {
          name: "",
          sex: "女",
          age: 18,
          score: 120
      }
  });
  var man = new person();
  man.on("change:score",function(model,value){
      // previous("attrName"):表示获取对象中某个值的原有值
      var oldScore = model.previous("score");
      if( value > oldScore){
          console.log("您比上次进步了 " + (value - oldScore) + " 分");
      } else if ( value < oldScore){
          console.log("您比上次落后了 " + (oldScore - value) + " 分");
      } else {
          console.log("您的成绩没有发生变化");
      }
  });
  man.on("change:age",function(model,value){
      // previousAttrubutes():返回一个对象，包含上一个保存状态中所有属性的原有值
      var objAttr = model.previousAttributes();
      var oldage = objAttr.age;
      if( value > oldage){
          console.log("您又年长了 " + (value - oldage) + " 岁");
      } else if ( value < oldage){
          console.log("您又年轻了 " + (oldage - value) + " 岁");
      } else {
          console.log("您的年龄没有变化");
      }
  });
  man.set({"age" : 24,"score": 145});

显示结果：

• 绑定多个事件

var person = Backbone.Model.extend({
    defaults:{
        name: "",
        sex: "女",
        age: 24,
        score: 120
    }
});
var man = new person();
man.on("change:score change:age",function(model,value){
    var oldage = model.previous("age");
    var newage = model.get("age");
    if(oldage != newage){
        console.log("age原值：" + oldage + ", 新值：" + newage);
    }
    var oldscore = model.previous("score");
    var newscore = model.get("score");
    if( oldscore != newscore){
        console.log("score原值：" + oldscore + ",新值：" + newscore);
    }
});
man.set("age",28);
man.set("score",150);

显示结果：

once

once和on方法一样可以完成对象事件的绑定，但是once方法绑定的事件只能执行一次，之后再不会执行。

var person = Backbone.Model.extend({
    defaults:{
        name: "",
        sex: "女",
        age: 24,
        score: 120
    }
});
var man = new person();
var intNum = 0;
man.once("change", function(){
    intNum++;
    console.log("事件触发的次数为：" + intNum);
});
man.set("age",25);
man.set("age",26);

显示结果：

trigger

使用on方法等绑定模型对象的自定义事件，然后调用trigger方法触发绑定事件。

var person = Backbone.Model.extend({
    defaults:{
        name: "",
        sex: "女",
        age: 24,
        score: 120
    }
});
var man = new person();
man.on("change_age_sex",function(){
    console.log("您手动触发了一个自定义事件");
});
man.on("change:age",function(model,value){
    if(value != undefined){
        console.log("您修改后的年龄为 " + value);
    } else {
        console.log("您手动触发了一个年龄修改事件");
    }
});
man.trigger("change_age_sex");
man.trigger("change:age");
man.set("age",27);

显示结果：

off

移除对象中已经绑定的某个、多个或全部的事件。

• 移除对象的某个或对各绑定事件

  var person = Backbone.Model.extend({
      defaults:{
          name: "",
          sex: "女",
          age: 24,
          score: 120
      }
  });
  var man = new person();
  var m=0,n=0;
  var callback_a = function(){
      m++;
      console.log("您执行a事件的次数为 " + m);
  }
  var callback_b = function(){
      n++;
      console.log("您执行b事件的次数为 " + n);
  }
  man.on("event_a", callback_a);
  man.on("event_b", callback_b);
  man.off("event_a");
  man.trigger("event_a event_b");
  man.off("event_a event_b");
  man.trigger("event_a event_b");

显示结果：

• 移除绑定事件的某个函数

  man.off("event_a",callback_a);

• 移除对象的全部绑定事件

  Obj.off()

新增事件方法

listenTo

Obj1.listenTo(Obj2,EventName,function);

1. Obj1，Obj2：表示对象
2. EventName：表示Obj2对象触发的事件名称
3. function：表示Obj2触发指定的EventName事件时，Obj1所执行的自定义函数

listenToOnce

Obj1.listenToOnce(Obj2,EventName,function);

stopListening

Obj1.stopListening(Obj2,EventName,function);

参考资料

• Backbone.js实战