Backbone Event Aggregator extended

UPDATE : Please use the code found in my follow-up.

Derick Bailey wrote a great post decoupling Backbone Views from one another through the use of an Event Aggregator. I wanted to use this without passing in the dispatcher into all these Views, Models, etc. To accomplish this I came up with the following:


//namespace our extensions

var BackboneExt = BackboneExt || function() {
    var backbonePrototypes = [

    var extensions = {

        dispatcher : _.extend({}, Backbone.Events,{cid : 'dispatcher'}),
        wrappedEvents : function(localEvents) {
            var local = localEvents || _.extend({},Backbone.Events);
            //note that 'this' is the Backbone implementation
            return {            
                dispatcher : BackboneExt.dispatcher,            
                trigger : function() {                                      
                    var args = _.toArray(arguments);                
                    // this._callbacks is an internal collection 
                    // currently backbone could 
                    if( this._callbacks ) {                             
                    return this;            


        extendBackbone : function() {
            var self = this;
            if( self.isExtended ) {
            _.each(backbonePrototypes,function(proto) {
                _.extend(proto, self.autoBinder, self.wrappedEvents());
    return extensions;


Note that dispatcher is now exposed in any of the Backbone components. We just overwrite the default Backbone.Events.trigger with our own that composes the local trigger with the global (dispatcher) trigger.


This keeps my Backbone components blissfully ignorant of its subscriber(s):

// some simple jquery notification component
BackboneExt.dispatcher.bind('mynamespaced:event', function(args) {

// some Backbone.Model
var model = new SomeModel({
    // ...
    someMethod : function() {
        this.trigger('mynamespaced:event',{ message : 'something happened' });


This can work the other way, too, but the Backbone components need to explicitly bind to the exposed dispatcher:

//inside Backbone.Model initializer
var model = new SomeModel( {
    initialize : function() {
        dispatcher.bind('someglobalevent:happened', this.someMethod);
    someMethod : function() { ... }

BackboneExt.dispatcher.trigger('someglobalevent:happened', 'something happened'); //calls 'someMethod' in model

Posted 08-14-2011 8:21 PM by Michael Nichols
Filed under:



Dan G. Switzer, II wrote re: Backbone Event Aggregator extended
on 09-23-2011 5:39 PM


I've been toying around with the idea of doing something similar, but simpler:

var BackboneExt = BackboneExt || {Dispatcher: _.extend({}, Backbone.Events)};

It doesn't give me a shortcut of "dispatcher" in my Backbone objects, but it seems like it's more straightforward and has less overhead.

Why did you decide to go to the extra lengths of overwriting the trigger() method and adding the dispatch reference?

Mikeri wrote re: Backbone Event Aggregator extended
on 09-23-2011 5:49 PM

I want to fire events inside my BB objects and not concern myself with who is listening as it should be.

I can call this.trigger('myNamespace:myEvent') and the plumbing takes care of the rest.

the reason for the dispatch reference is so I can explicitly subscribe to events outside my BB object.  

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)