Backbone入门指南(三):Events(事件管理)
2017-12-12 09:48
246 查看
转自:http://blog.csdn.net/likun557/article/details/53169357
6. Events (事件管理)
从这一章开始,我将正式介绍Backbone的内容,过程中会有许多例子和代码,你应该将这些代码复制到你的页面,并查看它们的运行效果。我介绍的第一个模块是Backbone.Events(事件管理),因为我在介绍任何其它的模块时都会提到它,你可以想象到它的重要性。
Events是Backbone中所有其它模块的基类,无论是Model、Collection、View还是Router和History,都继承了Events中的方法。
Events为其它的模块提供了事件管理相关的方法,包括on、off和trigger.
假如你熟悉jQuery,你可以跳过本节,因为它们与jQuery中的bind、unbind和trigger方法非常类似,但我并不建议你这样做,因为它们之间仍有不同。
我们无法直接实例化一个Events对象,因为它必须要依赖于Backbone中的某一个模块类(或子类)才能使用,例如:
[javascript] view
plain copy
// 创建一个Model的实例
var m = new Backbone.Model();
// 将监听函数绑定到m对象的自定义事件custom中
m.on('custom', function(index) {
// 监听函数接收并显示参数index
alert(index);
});
// 循环触发m对象的custom事件
for(var i = 0; i < 3; i++) {
m.trigger('custom', i);
}
// 从m对象的custom事件中移除已绑定的所有监听函数
m.off('custom');
// 试着再次触发custom事件
m.trigger('custom', i);
我们创建了一个Model的实例,Model是Backbone中的数据模型类,目前你只需要知道它继承了Events类中的方法。
我们通过on方法给m对象的自定义事件custom绑定了一个监听函数,监听函数会接收一个参数index并将它显示出来。接着我们在一个循环中调用m对象的trigger方法触发custom事件,结果正如你看到的:监听函数接收了参数i并将其显示出来。最后我们通过off方法移除m对象custom事件中已绑定的监听函数,当试着再次触发custom事件时,不会再执行任何动作。
(在本例中,我们创建了Model类的实例,这仅仅是为了让例子显得更简单,而实际上我们常常都会继承Model而不是直接实例化)
通过上面的例子中,我们可以为Events中的方法这样定义:
on:将一个函数绑定到对象的某个事件中
off:移除对象某个事件中已绑定的所有函数(实际上它还可以只移除指定的函数,或移除对象中已绑定的所有事件,这与调用off方法时传递的参数有关,请参考API文档)
trigger:触发对象的某个事件
这看起来和jQuery中的事件方法非常类似(当然,jQuery还支持DOM事件),接下来我们再看另一个例子:
[javascript] view
plain copy
// 创建一个Model的实例
var m = new Backbone.Model();
// 将监听函数绑定到m对象的all事件中
m.on('all', function() {
alert('all');
});
// 将监听函数绑定到m对象的自定义事件show中
m.on('show', function() {
alert('show title');
});
// 将另一个监听函数绑定到m对象的自定义事件show中
m.on('show', function() {
alert('show content');
});
// 将监听函数绑定到m对象的自定义事件hide中
m.on('hide', function() {
alert('hide');
});
// 触发m对象的show事件和hide事件
m.trigger('show');
m.trigger('hide');
执行显示的结果分别为:
show title
show content
all
hide
all
在本例中,我们为m对象的all事件绑定了监听函数,all是Backbone中一个特殊的事件,它在当前对象触发任何事件之后,都会被自动触发。(你也可以通过trigger直接触发all事件)
你需要注意监听函数的调用顺序,all事件总会在其它事件中的监听函数都执行完毕之后触发,同一个事件中如果绑定了多个监听函数,那它们将按照函数绑定时的顺序依次调用。
在Backbone内部,会为每个对象添加一个_callbacks私有属性,用于记录该对象中绑定的事件和监听函数列表。Events类的on、off和trigger方法都围绕每个对象的_callbacks列表在操作。
相关文章推荐
- Backbone入门指南(三):Events(事件管理)
- BackBone入门指南(三):Events(事件管理)
- Backbone事件管理——Backbone.Events模块API结构
- 分享:Backbone.js 样例站点与入门指南
- Java Gradle入门指南之依赖管理(添加依赖、仓库、版本冲突)
- Backbone入门指南(六):View (视图)
- Backbone入门指南(四):Model(数据模型)
- Java Gradle入门指南之插件管理(类型、导入及java plugin使用)企
- Javascript前端UI框架Kit使用指南之kitjs事件管理
- AngularJS快速入门指南11:事件
- backBone 入门指南
- Backbone事件Events
- Backbone入门指南(五):Collection (数据模型集合)
- Ember.js 入门指南——处理事件
- Backbone入门指南(一):什么是Backbone?
- Backbone事件机制核心源码(仅包含Events、Model模块)
- Backbone入门指南(六):View (视图)
- Ember.js 入门指南——处理事件
- Java Gradle入门指南之简介、安装与任务管理
- yii2实战教程之新手入门指南-简单博客管理系统