Rob Dodson talks internets

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:

var doc = Documents.first(); // <-- Model object

new DocumentRow({ // <-- View object with model reference
  model: doc,
  id: "document-row-" + doc.id
});

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?

Today I want to figure out what kind of events to use when one of my views is added to the DOM. This can have a lot of ramifications for positioning elements around the view and setting up properties on the view itself.

I’m going to try to approach some of my future articles as more of a question/answer setup so they don’t turn into these sprawling tutorials. Today I want to focus on moving between views in Backbone.js. I’m starting with some very simple templates and three views: LeftView, MiddleView, RightView. To do this quickly we’ll make it so each view is essentially a big button which, when clicked on, should animate to the middle of the screen.

CSS3 is a rather verbose tool especially when it comes to transitions and animations. I want to see if there’s a way to clean a lot of that up with either a SASS mixin or a jQuery library like gfx.

We’ll try to do something simple at first to recreate an animation like the one we have below.

Rollover the grey area to activate it.

I want to talk a bit more about the Backbone Router because I think it’s one of the first pieces of the framework that people run up against that deviates from the standard MVC setup.

Here are some quick Backbone snippets to help visualize concepts. I’ll move around fairly quickly so if you’re interested in going more in-depth then checkout the documentation.