I have previously covered Backbone.js here, and it seems to be gaining some steam. As of writing, there doesn’t seems to be that many tutorials though, so here one that tries to get you started with the fundamentals, with minimal extra fuzz:

Here‘s the usual demo, you can press the “Add” and “Fake save” buttons as much as you like, they don’t do anything apart from writing to an ad-hoc log at the end of the page.

What’s we’re really interested in for this demo is only the Javascript part. The full source is here. Keep it around for reference when you continue reading.

Fundamentals: Model, Collection and View

There are three fundamental classes (yeah, difficult term in Js, but anyway..) that you need to know about: Backbone.Model is the singular of your data (one row in your db, traditionally speaking) and Backbone.Collection is the plural (typically matched by a query on the server-side). It represents a group of data that has something in common.

Then you have Backbone.View, that 1) should be a visual representation of your data and 2) (optionally) should provide editing affordances for individual Model‘s.

For simplicity’s sake, we begin with defining the simplest possible Model:

var Model = Backbone.Model.extend();

We now have a model class that we can instantiate with a simple

var model = new Model({label:'Test label'});

Backbone models have attributes, which is where the individual pieces of data are stored. The attributes can’t be read/manipulated in the form model.attr_name, but should be read with model.get('attr_name') and written to with model.set(<attributes>) where attributes is a standard Javascript object with one to many attributes to set, e.g. {label: 'Item 1', order: 1}.

model here would have exactly one attribute, label, set to 'Test label'.

Having defined how one data item looks like, you can continue to creating the definition and possible and instance of how several items look:

// Definition, tell it what king of items it will contain
var Models = Backbone.Collection.extend({model:Model});

// Create a models instance with two example items in it (we pretend
// that the JSON list comes from a server:
var models = new Models([ {id: 'm1', label:'Item 1'},
                          {id: 'm2', label:'Item 2'} ]);

Model instances can then be tied to a Backbone.View instance, created similarly:

View = Backbone.View.extend({
    // shortened for brevity..
});

This example is shortened, View creation is more complex, view the full implementation here. Class creation follows the same pattern as when creating Models, though. You can then attach your model instance to a view instance:

var model = new Model({label:'Test label'});
var view = new View({model: model});

The View is responsible for creating itself in it’s .render() method. In the example, the built-in templating mechanism of Underscore.js is used to create a dead-simple DOM fragment: Just one single <input> node.

As can be seen in the Gist, the View also has a clever way of dispatching events in it’s DOM fragment, that’s initialized lazily using the View‘s .events property. The .events property is an object whose keys are jQuery selectors tied to method of the View instance itself. This makes it truly easy to fish for changed values if your view allows the end-user to change it’s values. Instant widgets! Take a look at line 44 in the Javascript to see a simplified example of this.

The not strictly Backbone parts of the example

The Model instance model is initialized with a JSON list of objects that really ought to come from a server. After the models is created, the example uses the fact that Underscore.js functionallity is present in Backbone.Collection to create a simple list of View instances. The view objects are rendered and appended to a <div> element in the DOM to become visible.

As soon as they are visible, the view‘s .events object will dispatch onchange events to the view‘s .change method.

Then two vanilla jQuery event handlers exist for the “Saving” and “Adding” of items. The example monkeypatches Backbone.sync to only log the server calling actions so you can see what Backbone does behind the scenes.

Further reading

To see a more elaborate real-world’y example of Backbone driven code, read Jérôme Gravel-Niquet’s annotated Todo app source code.

The official Backbone.js documentation is, as usual with DocumentCloud projects, very throughly documented, but can be a little daunting at first – hence this tutorial.

Another Backbone.js demo app, also a bit more elaborate with a real backend (Ruby/Sinatra).

Critique

Backbone is a true time-saver. But one thing makes me a little nervous. There doesn’t seem to be any convenient way of doing bulk saves. I’d like to be able to say something along the lines of models.save() on my Collection, having it aggregate all changes and try to post them as a list of objects to the server. Sending the models down the wire one at a times raises some flags both from a transactional integrity and network efficiency perspective.

Do correct me in the comment if I’ve got this wrong about that.