`
XUST
  • 浏览: 4666 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

Backbone 1.0.0 版 API _ Backbone.Events 解析

阅读更多
Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events. Events do not have to be declared before they are bound, and may take passed arguments. For example
var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
  alert("Triggered " + msg);
});
object.trigger("alert", "an event");
Backbone.Events是一个能够被任何对象继承的模块,如果一个对象继承Events后,将拥有Events的一些能力,即能绑定和触发自定义事件。使用Events不需要声明,只需要传入相应的参数即可。
For example, to make a handy event dispatcher that can coordinate events among different areas of your application: var dispatcher = _.clone(Backbone.Events)
可以很简单的创建一个事件适配器,能够整合你的程序中不同地方用到的事件。

onobject.on(event, callback, [context])Alias: bind 
Bind a callback function to an object. The callback will be invoked whenever the eventis fired. If you have a large number of different events on a page, the convention is to use colons to namespace them: "poll:start", or "change:selection". The event string may also be a space-delimited list of several events...

 

on是Backbone.Events的一个方法,通过extend继承后的对象就可以调用on方法,bind是on的别名:

book.on === book.bind;  //true

 on支持多个自定义事件同时绑定,用空格分割。

 

book.on("change:title change:author", ...);

To supply a context value for this when the callback is invoked, pass the optional third argument: model.on('change', this.render, this)

 

绑定的事件被激活后,可以通过第三个参数,传递上下文。

 

Callbacks bound to the special "all" event will be triggered when any event occurs, and are passed the name of the event as the first argument. For example, to proxy all events from one object to another:

 

有一个特殊的事件,即 all,任何事件的触发都会触发all绑定的事件,同时会将事件名作为第一个参数传递给all绑定的事件。

 

proxy.on("all", function(eventName) {
  object.trigger(eventName);
});

All Backbone event methods also support an event map syntax, as an alternative to positional arguments:

Backbone.Events的所有方法都支持事件map映射,如下更容易使用:

 

book.on({
  "change:title": titleView.update,
  "change:author": authorPane.update,
  "destroy": bookView.remove
});

offobject.off([event], [callback], [context])Alias: unbind 
Remove a previously-bound callback function from an object. If no context is specified, all of the versions of the callback with different contexts will be removed. If no callback is specified, all callbacks for the event will be removed. If no event is specified, callbacks for all events will be removed.

 

off移除绑定事件,别名unbind,最多有三个参数,都是可选项。如果没有参数的话,就是移除所有事件的所有callback,如果有一个参数就是event的所有callback;如果有两个参数就是移除event的callback;如果有三个参数,就是移除context身上绑定的event对应的callback方法。

event和callback可能为null,表示不指定具体某一个event或callback,而是移除所有event或者callback.

 

// 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();

Note that calling model.off(), for example, will indeed remove all events on the model — including events that Backbone uses for internal bookkeeping.

 triggerobject.trigger(event, [*args]) 

Trigger callbacks for the given event, or space-delimited list of events. Subsequent arguments to trigger will be passed along to the event callbacks.

 

触发事件,支持map映射

var object = {};
_.extend(object, Backbone.Events);
object.on("all", function (eventname) {
		alert(eventname);
	});
object.on({
		"test" : function (msg) {
			alert(msg);
		},
		"hello" : function (msg) {
			alert(msg);
		}
	});
object.trigger({
		"test" : "hello",
		"hello" : "hello world"
	});

 

onceobject.once(event, callback, [context]) 
Just like on, but causes the bound callback to only fire once before being removed. Handy for saying "the next time that X happens, do this".

 

once就是on事件的一个简单的封装,即自定义事件触发一次后就移除callback。

 

listenToobject.listenTo(other, event, callback) 
Tell an object to listen to a particular event on an other object. The advantage of using this form, instead of other.on(event, callback), is that listenTo allows the object to keep track of the events, and they can be removed all at once later on.

 

让一个对象监听另外一个对象发生的特殊事件,在表单应用中有优势。

 

view.listenTo(model, 'change', view.render);

stopListeningobject.stopListening([other], [event], [callback]) 
Tell an object to stop listening to events. Either call stopListening with no arguments to have the object remove all of its registered callbacks ... or be more precise by telling it to remove just the events it's listening to on a specific object, or a specific event, or just a specific callback.

相对于listenTo,停止监听。

 

view.stopListening();

view.stopListening(model);

listenToOnceobject.listenToOnce(other, event, callback) 
Just like listenTo, but causes the bound callback to only fire once before being removed.

只监听一次,一次后就stopListening

 

 

Catalog of Events 
Here's the complete list of built-in Backbone events, with arguments. You're also free to trigger your own events on Models, Collections and Views as you see fit. TheBackbone object itself mixes in Events, and can be used to emit any global events that your application needs.

下面的是Backbone.Events内置的一些儿事件,当然你也可以触发你绑定在Model上的自定义事件。

  • "add" (model, collection, options) — when a model is added to a collection.
  • "remove" (model, collection, options) — when a model is removed from a collection.
  • "reset" (collection, options) — when the collection's entire contents have been replaced.
  • "sort" (collection, options) — when the collection has been re-sorted.
  • "change" (model, options) — when a model's attributes have changed.
  • "change:[attribute]" (model, value, options) — when a specific attribute has been updated.
  • "destroy" (model, collection, options) — when a model is destroyed.
  • "request" (model, xhr, options) — when a model (or collection) has started a request to the server.
  • "sync" (model, resp, options) — when a model (or collection) has been successfully synced with the server.
  • "error" (model, xhr, options) — when a model's save call fails on the server.
  • "invalid" (model, error, options) — when a model's validation fails on the client.
  • "route:[name]" (params) — Fired by the router when a specific route is matched.
  • "route" (router, route, params) — Fired by history (or router) when any route has been matched.
  • "all" — this special event fires for any triggered event, passing the event name as the first argument.

Generally speaking, when calling a function that emits an event (model.set(),collection.add, and so on...), if you'd like to prevent the event from being triggered, you may pass {silent: true} as an option. Note that this is rarely, perhaps even never, a good idea. Passing through a specific flag in the options for your event callback to look at, and choose to ignore, will usually work out better.

整体来说,当触发一个事件的回调函数是,你也可以通过传递参数silent: true,来阻止回调函数的执行。

 
 
分享到:
评论

相关推荐

    ctdet_coco_dla_2x.pth

    ctdet_coco_dla_2x.pth, 来自GoogleDrivede的预训练模型,基于COCO数据集训练,CenterNet的backbone网络模型文件,论文为Object As Points

    model_ir_se50.pth

    id_loss model, modified backbone implementation from TreB1eN - InsightFace_Pytorch

    instances_minival2014.json.zip

    《Keras实现Mask R-CNN:深度学习中的实例分割与数据集解析》 在计算机视觉领域,实例分割是一项重要的任务,它旨在识别图像中的每个对象并精确地分割出它们的边界,而不仅仅是分类。Mask R-CNN是Facebook AI ...

    backbone_api_frame

    Backbone_API_frame是一个基于Backbone.js和ExtJS开发的API框架,主要目的是为了提供一个高效、结构化的Web应用开发解决方案。这个框架结合了Backbone.js的模型-视图-控制器(MVC)架构和ExtJS的组件化能力,旨在...

    opencv-4.4.0-vc14_vc15.exe

    ONNX:添加对Resnet_backbone(Torchvision)的支持#16887 EfficientDet模型支持:#17384 新样本/演示: 添加文本识别示例:C ++ / Python FlowNet2光流:#16575 英特尔®推理引擎后端(OpenVINO™): ...

    pvtv_backbone

    本文将深入探讨"pvtv_backbone"这一特定的预训练模型,以及与之相关的"TransCenter V2"。 "PVTv2"( Pyramid Vision Transformer v2)是PVT系列的一个改进版本,它是一个基于Transformer架构的视觉模型。...

    backbone-events-standalone, 独立,最低版本的Backbone.Events.zip

    backbone-events-standalone, 独立,最低版本的Backbone.Events backbone-events-standalone 这是在浏览器或者nodejs环境中,提取 Backbone 插件( 可以使用独立的( 无外部相关性) )的事件的插件模块。哦,亲爱的,为...

    yolact_im700_54_800000.pth

    YOLACT预训练模型,Image Size:700 Backbone:Resnet101-FPN To evalute the model, put the corresponding weights file in the ./weights directory and run one of the following commands. The name of each ...

    Backbone.Events.onReady:Backbone.Events 的 onReady() 方法

    以下方法可用于支持 Backbone.Events API 的任何对象。 即View 、 Model 、 Collection或通用。 使用默认的“就绪”事件: object.onReady(callback) 在callback triggerReady时或之后立即运行callback 。 ...

    ctdet_pascal_dla_384.pth

    ctdet_pascal_dla_384.pth, 来自GoogleDrive的预训练模型,基于Pascal VOC数据集训练,CenterNet的backbone网络模型文件,论文为Object As Points

    backbone-marionette-1.0.0-beta6-1.jar

    官方版本,亲测可用

    ssh_full.zip_AOP java_aop_backbone jsp_backbone struts_ssh

    在描述中提到的"AOP java_aop_backbone",这可能指的是在Java环境中使用AOP技术,并且可能与Backbone.js这个JavaScript库有关。Backbone.js是一个轻量级的MV*框架,用于构建富前端应用。然而,通常Backbone.js与后端...

    Backbone.js(1.1.2) API中文文档.zip Backbone.js离线文档

    3. **集合(Collections)**:集合是模型的有序列表,它们继承自Backbone.Events,因此可以触发和监听事件。集合有自己的URL,可以进行同步操作,如`fetch`和`create`。集合中的模型可以通过比较ID来保持唯一性。 4...

    mask_rcnn_ballon.zip

    《深入理解Mask R-CNN:基于“mask_rcnn_ballon.zip”的深度学习实例解析》 在计算机视觉领域,Mask R-CNN是一种先进的卷积神经网络(CNN)架构,专为对象检测和语义分割任务而设计。这个名为“mask_rcnn_ballon....

    英美概况选修课练习全稿附答案解析.doc

    2. The Pennines are known as the “Backbone of England”. 正确。潘宁山脉被称为“英格兰的脊梁”。 3. London, the capital of the UK, is situated on the Thames River near its mouth. 正确。英国首都伦敦...

    JavaScript_Application_Architecture_with_Backbone.js

    - **Backbone.Events**:允许对象之间通过事件进行通信,是Backbone.js中最基础也是最核心的部分。 - **on**: 注册监听器。 - **off**: 移除监听器。 - **trigger**: 触发事件。 - **Backbone.Model**:负责数据...

    simplefasterRCNN_simplefaster.rcnn_simplefastetrcnn_RCNN_源码.rar

    《深入解析SimpleFaster R-CNN:基于PyTorch的实现》 SimpleFaster R-CNN,作为 Faster R-CNN 的简化版本,是目标检测领域中的一个重要算法。它在保持高效的同时,继承了 Faster R-CNN 的核心思想,即区域提议网络...

    JavaScript的Backbonejs框架入门学习指引_基础知识.doc.pdf

    Backbone.View允许开发者通过声明式的事件处理(如`events`对象)来管理DOM事件,提高代码的可读性和可维护性。 3. **路由器(Router)**:路由器在Backbone中起到了URL路由的作用,它监听浏览器的URL变化,并调用...

    JavaScript的Backbonejs框架入门学习指引_基础知识.doc.docx

    Backbone.js 是一个轻量级的JavaScript框架,专门用于构建富客户端Web应用程序。它的设计灵感来源于经典的MVC(Model-View-Controller)模式,帮助开发者结构化前端代码,提高代码的可维护性和可扩展性。以下是对...

Global site tag (gtag.js) - Google Analytics