JavaScript Architecture: Backbone.js Events

Updated Aug 11, 2012 to reflect current library versions.

Backbone.js is an MVC framework for JavaScript applications (although some legitimately argue it’s not technically MVC). Its purpose is to provide structure to your application so it can be modular, decoupled, and scalable. If you’re not sure why you may need an application framework, please read JavaScript Architecture: The Basics first. Backbone is not a dom manipulation utility, templating engine, or UI component library.

Backbone.js files and documentation can be found here or you can get involved with the source and community at GitHub. At the time of this writing, the unminified, documented code is only about 1,200 lines long so don’t be afraid to dig in and walk through the code itself. Heck, there’s even an annotated version.

Backbone.Events

At the heart of every RIA is the observer pattern (otherwise known as the publisher/subscriber pattern). The observer pattern is a design pattern that allows an object to be notified when another object has something to say, or in other words, has an event which it wishes to broadcast.

DOM elements (links, buttons, containers, etc.) already have the observer pattern natively baked in which is why you can watch for when a button is clicked without using libraries like Backbone or jQuery. However, there are times where we want our own JavaScript objects to trigger/dispatch events and we would normally have to write the implementation of this pattern ourselves. That’s where Backbone comes in. Backbone has this code for you in Backbone.Events.

Backbone.Events provides an implementation of a string-key-based observer pattern. In pseudo-code, it operates as follows. I’ve been changing a lot of poop-holes lately so let’s say I’m coding in object dad and object dad needs to know when object baby drops a turd in its deuce-trap:

var changeDeuceTrap = function() {
   baby.deuces = 0;
   baby.shutCakeHole();
};

baby.on('turdDropped', changeDeuceTrap);

And somewhere within baby we have:

this.trigger('turdDropped');

Dad’s telling baby, “Let me know you dropped a turd so I can change your deuce-trap.” If mom had access to the same baby, she could likewise watch for when the baby drops a turd and change the deuce-trap too. If she does so, when the baby drops its next turd we’ll both the notified. In other words, multiple observers can watch for the same event.

You might think this is magic but it’s not. What’s happening here is dad is literally passing the changeDeuceTrap function to baby. Baby then maintains an array for turdDropped and adds changeDeuceTrap to the array. If another observer chooses to listen for the same event, that observer's function will also be added to the same array inside baby. When baby drops a turd, it iterates through the array calling all the "callback" functions it contains.

While we can easily give any object event-triggering powers using Backbone.Events, don’t worry about it for now. Backbone.Model and Backbone.Collection already have Backbone.Events baked in and those are the main types of objects triggering events in our applications.

I should mention jQuery has an observer pattern implementation of its own but we’ll be focusing on Backbone.

Read more in the Backbone.Events documentation.

Continue Reading

Previous post in this series: Underscore.js
Next post in this series: Backbone.js Models