Backbone的事件模块

标签（空格分隔）： backbone.js mvc event

---

事件（events）模块是backbone的核心模块之一，model,view,collection等都是继承自events模块。下面让我们通过一张图来了解一下events模块。

这里的bind/unbind事件为了实现向后兼容。

下面依次介绍一下各个方法

on方法

---

object.on(event, callback, [context])

通常情况下我们会在model上来监听某一事件执行回调，例如：

var Person = Backbone.Model.extend({
  defaults : {
    name : "",
    sex : ""
  }
});
var man = new Person();
man.on('change:name', function () {
//如果change后不跟属性名，则监听模型的所有属性变化
  console.log('对象的name发生了变化');
});
man.set('name', 'whywhy');

当然我们也可以通过on获取属性修改之前的值，例如：

var Person = Backbone.Model.extend({
  defaults : {
    name : "",
    sex : "女",
    age : 32,
    score : 120
  }
});
var man = new Person();
man.on('change:score', function (model, value) {
  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) {
  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 : '36',
  score : 200
});

在上述代码中，通过使用on方法分别绑定对象man的change:score 和 change:age两个属性事件。

在第一个属性事件change:score 中，通过回调函数中model模型对象的previous方法，获取上一次保存的score属性值。

在第二个属性事件change:age 中，通过回调函数中model模型对象的previousAttributes方法，获取上一次保存结果的对象，并将对象保存至变量objAttr中，再通过访问对象变量objAttr的方式获取上一次保存的age属性值。
如果要通过on绑定多个事件，有两种形式

//第一种
model.on('change:name change:age change:score',callback, [context]);
//第二种
var objEvent = {
  'change:score' : callback1,
  'change:age' : callback2
};
model.on(objEvent)

trigger方法

---

trigger顾名思义，就是触发一个事件

var Person = Backbone.Model.extend({
  defaults : {
    name : "",
    sex : "女",
    age : 32,
    score : 120
  }
});
var man = new Person();
man.on('change_age_sex', function () {
//监听一个事件
  console.log('你手动触发了一个自定义事件');
});
man.trigger('change_age_sex');//手动触发监听的事件

off方法

---

从 object 对象移除先前绑定的 callback 函数。如果没有指定context（上下文），所有上下文下的这个回调函数将被移除。如果没有指定callback，所有绑定这个事件回调函数将被移除；如果没有指定event，所有事件的回调函数会被移除。

// Removes just the `onChange` callback.
object.off("change", onChange);

// Removes all "change" callbacks.
object.off("change");

// Removes the `onChange` callback for all events.
object.off(null, onChange);

// Removes all callbacks for `context` for all events.
object.off(null, null, context);

// Removes all callbacks on `object`.
object.off();
//这里需要注意，调用 model.off()，例如，这确实会删除model（模型）上所有的事件—包括Backbone内部用来统计的事件。

listenTo方法

---

object.listenTo(other, event, callback) 我们可以看出listenTo方法是一个对象监听另一个对象，通常我们会在view中监听model的变化，从而重新执行view的render方法。

var personView = Backbone.View.extend({
    initialize:function() {
        this.listenTo(this.model,'change',this.render);
    },
    render:function(){
        console.log('render the page')
    }
});
var personModel = Backbone.Model.extend({
    name:'why',
    age:123
});
var personModel = new personModel();
var personView = new personView({
    model:personModel
});
personModel.set('name','wwwwww');

stopListening方法

---

让 object 停止监听事件。如果调用不带参数的stopListening，可以移除 object 下所有已经registered(注册)的callback函数…，或者只删除指定对象上明确告知的监听事件，或者一个删除指定事件，或者只删除指定的回调函数。

view.stopListening();
view.stopListening(model);

var Person = Backbone.Model.extend({
  defaults : {
    name : "",
    sex : "女",
    age : 32,
    score : 120
  }
});
var man = new Person();
var obj = _.extend({}, Backbone.Events);
obj.listenTo(man, 'change:name', function (model, value) {
  console.log('姓名修改后的值为:' + value);
});
obj.listenTo(man, 'change:age', function (model, value) {
  console.log('年龄修改后的值为:' + value);
});
obj.listenTo(man, 'change:score', function (model, value) {
  console.log('分数修改后的值为:' + value);
});
//停止监听某一个事件
obj.stopListening(man, 'change:name');
man.set('name', '张三');
man.set('age', 35);
man.set('score', 600);
//停止监听两个事件
obj.stopListening(man, 'change:name change:age');
man.set('name', '李四');
man.set('age', 36);
man.set('score', 601);
//停止监听全部事件
obj.stopListening();
man.set('name', '王五');
man.set('age', 37);
man.set('score', 602);

listenToOnce和once

(1).once用法跟on很像，区别在于绑定的回调函数触发一次后就会被移除（愚人码头注：只执行一次）。简单的说就是“下次不在触发了，用这个方法”。
(2).listenToOnce用法跟 listenTo 很像，但是事件触发一次后callback将被移除。