标签(空格分隔): 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将被移除。