backbone.js 1 0 jQuery#

Sun, 29 Jan 2012 22:04:06 +0000

I've spent a few hours over the last couple of days figuring out how to use backbone.js, and so far I'm impressed by it: it solves a real problem elegantly and doesn't seem to have an entire religion bolted onto the side of it.

5 minute summary: it introduces models (and collections of them) and views to client-side javascript, and connects them with a publish/subscribe event notifier system so that when you make changes to a model all the views of it update without your having to remember to do anything to them.

A Model is an object that knows how to update itself from a Rails-y "REST" server (scare quotes, because as we all know these days REST isn't what you think it is ), and publishes its attributes using the methods set and get.

	var m=find_me_a_model();
	var selected= (m.has('selected')) ? m.get('selected') : false;
	m.set({selected:  !selected});

Calling set will, if the value has changed, trigger a changed event handler to be called in all objects which have bound to it. These objects are usually Views.

A View is an object with a render method and an el attribute, and in which calling the former creates a piece of DOM tree in the latter, which you can then attach to your document somewhere

MyApp.Views.ThingView=Backbone.View.extend({
    initialize: function() {
	this.model.bind("all",this.render,this);
	this.render();
    },
    // ... this is not working code - I missed out some important bits ...
    events: {
	"click li" : "doselect",
    },
    doselect: function(e) { ... },
    render: function() {
	var ul=$(this.el);
	ul.html(somehtmlfor(this.model));
        return this;
    }
})
jQuery(document).ready(function() {
     var myView=new MyApp.Views.ThingView();
     $('#some_element').append(myView.render().el);
});

Collections are provided too. They come with a large number of iteration functions (map, filter, reduce, all that stuff) which makes them really rather useful, and you can build Views of them in much the same way as you can build views of models.

(To complete the completion, there's also a Router, which is an interface for monkeying around with the URL so you can build bookmarkable client-side apps. But I haven't had to use that yet)

Anyway. As you see in the example above, the view can also take a hash of events which is registered with jQuery using its delegate method. In this case we're asking to have do_select called whenever a click event is received on any li element inside it. Great!

Not so great when it unexpectedly doesn't work, though. Specifically, jQuery drag/drop events don't work with jQuery's delegate method, and there's nothing in the documentation on either page to stop you wasting an afternoon finding this out. Way to go. For more details on just how much hysterical raisins mess is involved with jQuery event handlers, see the pages for on and live - look upon these works, ye mighty, and despair.

backbone.js is here There's a Ruby gem for using it with Rails: add rails-backbone to your Gemfile, and you get a handy set of generators which write Coffeescript for you. (A brief inspection of the result says that this is a good thing because there's no way on earth I'd want to write that stuff myself. But I concede, significant whitespace is a valid personal preference, just not one of mine.)