I want to figure out how to communicate on a framework level within Backbone. Coming from Flash and RobotLegs I’m used to a few MVC conventions that work very well as far as event dispatching goes. In RobotLegs you typically have a framework wide eventDispatcher that anyone can tune into. In a nutshell your View will trigger an event, for instance a user clicking a button, and that will get dispatched to interested framework actors. These can be other Views or, more likely, they can be Commands. The Commands are like single use actions tied directly to events. Think of it like binding every public method of your controller to an event. The Commands will typically effect models, changing them in some way, and the Models will dispatch an event that the Views listen for to update themselves.
Backbone works differently in that Views are often tied directly to their models like so:
1 2 3 4 5 6
When you use this approach it’s trivial to tell the view to listen to the model’s change event and then call
view.render(). Essentially you are munging some of a Controller’s responsibilities into the View. That’s all well and good but let’s say we want to dispatch an event from one view which will affect other views and actors. This event has nothing to do with a model, maybe it’s just an animation of some kind that others need to know about. So how do we go about this?
Communicating between Views in Backbone
To facilitate this communication we’re going to use the
app object that Backbone Boilerplate creates for us. If you look in the
namespace.js file that comes with the boilerplate you should see a line like this way down at the bottom:
If you’re not familiar with Underscore.js’s extend method it basically takes all of the properties and functions of one object and copies them onto another. If you’re coming from a language that supports classical inheritence this should feel familiar. In the above example it’s creating a new empty object (app), and extending/inheriting from the Backbone.Events object. This means that the
app property of the
namespace module is basically one big event dispatcher.
So let’s create two very simple views in a module called
Chatty. One will be
Subject and the other
Observer. When we click the Subject we want it to dispatch an event that any framework actor can tune into. We’ll call this event
clicked:subject. When the Observer hears the
clicked:subject event we want it to replace its html content with whatever message is sent along.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
In our main.js file we’re just going to append those two views to the DOM whenever someone hits our route:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
And there you have it. When we click on
Subject it should replace the content in
Observer like so:
You should follow me on Twitter here.
- Mood: Excited, Rested
- Sleep: 6
- Hunger: 4
- Coffee: 0