Backbone 1.0.0 版 API _ Backbone.Events 解析

原创 2013年12月02日 11:28:59

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");

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...



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



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) {

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



  "change:title": titleView.update,
  "change:author": authorPane.update,
  "destroy": bookView.remove
});[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.





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

// Removes all "change" callbacks."change");

// Removes the `onChange` callback for all events., onChange);

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

// Removes all callbacks on `object`.;

Note that calling, 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.



  1. var object = {};  
  2. _.extend(object, Backbone.Events);  
  3. object.on("all"function (eventname) {  
  4.         alert(eventname);  
  5.     });  
  6. object.on({  
  7.         "test" : function (msg) {  
  8.             alert(msg);  
  9.         },  
  10.         "hello" : function (msg) {  
  11.             alert(msg);  
  12.         }  
  13.     });  
  14. object.trigger({  
  15.         "test" : "hello",  
  16.         "hello" : "hello world"  
  17.     });  


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".




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.





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




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.


  • "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,来阻止回调函数的执行。



6. Events (事件管理)   从这一章开始,我将正式介绍Backbone的内容,过程中会有许多例子和代码,你应该将这些代码复制到你的页面,并查看它们的运行效果。   我介绍的第一个模块是B...




  • 2015年01月13日 22:19
  • 451KB
  • 下载

backbone 源码+API

  • 2013年08月07日 22:30
  • 9.32MB
  • 下载

Backbone API 深入解说

Backbone.js events ON 下面一些重要的概念都有解释,点击就会看到详细解释...新手别想太多,跟着我走就好...   代码:   varobject = {};  ...
  • hg8008
  • hg8008
  • 2014年04月27日 12:40
  • 151

BackBone API

翻译:一回日期:2011-8-16反馈:xianlihua$ [$ -> @]特别鸣谢:CSSer 本手册可自由转载,但须注明译者及来源,尊重他人劳动,共建和谐的学习与研究氛围...
  • cony100
  • cony100
  • 2012年06月07日 16:58
  • 3164

Backbone.js API中文文档

翻译:一回日期:2011-8-16反馈:xianlihua$ [$ -> @]特别鸣谢:CSSer 本手册可自由转载,但须注明译者及来源,尊重他人劳动,共建和谐的学习与研究氛围...
  • problc
  • problc
  • 2011年12月20日 17:05
  • 4968

backbone.js -中文API pdf

  • 2012年05月03日 17:03
  • 759KB
  • 下载

backbone.js API文档 列子

  • 2017年02月19日 13:43
  • 5.86MB
  • 下载


header('Content-Type: application/json; charset=utf-8'); $a = array("name"=>"ylc"); echo $callback...
  • wonewer
  • wonewer
  • 2015年05月16日 11:16
  • 47
您举报文章:Backbone 1.0.0 版 API _ Backbone.Events 解析