6. Events (事件管理)
从这一章开始,我将正式介绍Backbone的内容,过程中会有许多例子和代码,你应该将这些代码复制到你的页面,并查看它们的运行效果。
我介绍的第一个模块是Backbone.Events(事件管理),因为我在介绍任何其它的模块时都会提到它,你可以想象到它的重要性。
Events是Backbone中所有其它模块的基类,无论是Model、Collection、View还是Router和History,都继承了Events中的方法。
Events为其它的模块提供了事件管理相关的方法,包括on、off和trigger.
假如你熟悉jQuery,你可以跳过本节,因为它们与jQuery中的bind、unbind和trigger方法非常类似,但我并不建议你这样做,因为它们之间仍有不同。
我们无法直接实例化一个Events对象,因为它必须要依赖于Backbone中的某一个模块类(或子类)才能使用,例如:
// 创建一个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事件),接下来我们再看另一个例子:
// 创建一个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对应的源码,这能帮助你加深记忆和理解,请参考:http://yujianshenbing.iteye.com/blog/1731340)
分享到:
相关推荐
backbone-events-standalone, 独立,最低版本的Backbone.Events backbone-events-standalone 这是在浏览器或者nodejs环境中,提取 Backbone 插件( 可以使用独立的( 无外部相关性) )的事件的插件模块。哦,亲爱的,为...
使用require.js模块化组织应用程序结构 轻量级无限滚动
Backbone.dataEvents 灵感来自 Backbone.Marionette 的 与事件哈希类似,视图可以为集合和模型指定配置哈希。 好处 通过模型和集合的声明性事件绑定更好地组织代码 轻量级,仅 1kb(相对于缩小为 40kb 的 ...
基于YOLOV5【更换backbone为Vgg】对大型海上目标检测数据集的目标检测实战项目,包含代码、数据集、训练好的权重参数,经测试,代码可以直接使用 【数据集介绍】海上目标图像数据,类别:邮轮、小鸟、鱼、帆船等共...
基于YOLOV5【更换backbone为MobileNet】对大型海上目标检测数据集的目标检测实战项目,包含代码、数据集、训练好的权重参数,经测试,代码可以直接使用 【数据集介绍】海上目标图像数据,类别:邮轮、小鸟、鱼、...
安装与一起安装: $ component install green-mesa/backbone-events原料药var Events = require('backbone-events');_.extend(Something, Events);Something.on("tickle" ... )执照麻省理工学院
Backbone.Events.onReady 将onReady和triggerReady方法添加到Backbone.Events 。 行为: 准备好之前- 注册回调。 准备就绪时,运行所有挂起的回调,从triggerReady传入任何数据。 准备就绪后- 立即运行回调,传入...
es6-backbone-events 用于事件的简洁 es6 模块。依赖项: 下划线或别名为“下划线”的类似库,单独安装构建依赖: GNU sed,可作为“gsed”访问学分所有功劳归功于 Jeremy Ashkenas 和
这是Backbone.js的扩展,具有一个Sync,该同步增加了对使用IE的XDomainRequest对象的IE 7-9 CORS请求的支持,同时保持了与非IE系统的兼容性。 这旨在替代默认的Backbone.sync,因此您应该可以将其放入其中,并且...
带有 Backbone.Events 的 Sub/pub 架构 支持状态之间的转换事件 状态和转换的 RegExp 匹配 易于连接到任何物体 兼容性和要求 Backbone.StateManager 当前具有以下依赖项: v1.7.0 v1.1.2 源代码和下载 Backbone....
backbone.js框架的简单入门教程,教程目的就是让初学者快速在项目中运用backbone.js
一个 Backbone 启发的事件系统。 应用程序接口: on(事件名称,回调) 添加事件监听器 参数: 字符串事件名称 函数回调 关闭(事件名称,回调) 移除事件监听器 参数: 字符串事件名称 函数回调 触发器(事件...
Backbone.D3View 仅使用D3 DOM方法进行元素选择和事件委派的Backbone.View的替代品。 它不依赖jQuery。 注意:Backbone.D3View至少依赖于1.b版本的Backbone。 Backbone 1.1.2与Backbone.D3View不兼容。使用方法: ...
//we have a Backbone.Events instance at our disposal in `app.vent` app . vent . on ( 'rolling' , function ( ) { console . log ( 'Here we go:' ) ; } ) ; var instruct = require ( 'backbone.whenthen' )...
Backbone.GoogleChart Google Charts 支持您的 Backbone 应用程序。什么? Backbone.GoogleChart基本上是一个Backbone.View ,它以“骨干”风格包装了 GoogleChart API依赖关系包括什么? src/backbone/GoggleChart....
Backbone.RPC2 将 Backbone 与 JSON RPC 2.0 API 结合使用 要求 (不是 Underscore 构建)或 Underscore 带有添加 _.deepClone 函数的 mixin。 这是将 _.deepClone 添加到下划线的混合示例: : 用法 // We used ...
Backbone.ModelBinding 项目状态:已放弃 我正式放弃这个项目。 在故意忽略不断增长的问题列表数月之后,由于时间不够和我不再使用这个库,我将不再支持它。 如果社区中的任何人希望拿起并接管它,请随意 - 祝你...
绑定事件简单的应用程序绑定事件并提供基本模式
Backbone.StateMachine用作混合,有点像Backbone.Events 。 声明状态机 让我们声明一个非常简单的状态机,它表示可以隐藏或可见HTML元素。 该机器将具有3个状态,即init , hidden和visible以及3个转换: init --...
backbone.routemanager, 更好的backbone.js 项目路由管理 backbone.routemanager由 Tim Branyen @tbranyen 创建。向 Backbone.Router 提供缺少的特性。依赖于下划线,Backbone 和 jQuery 。 你可以使用定制配置完全...