The basics of Backbone.js

I’ve been learning my way around Backbone quite a bit lately. It’s definitely a powerful library that can do some pretty cool things—enable you to change the layout of the page without having to make a server call, for example. Like most cool and powerful libraries, though, it can be difficult to wrap your head around. Backbone makes use of three central concepts: Models, Collections, and Views. One mistake I made when first getting into Backbone was thinking of these as analogous to list items, the list itself, and different layouts for the list. That’s not exactly right though—we’ll go into why not and what these things do after the jump.

Models

Models are the fundamental unit in Backbone. Each model is a discrete chunk of data—a user in a database, for example. Models can be given default values, or even have certain functions run on them when they are created—perhaps to make sure a user’s email address is valid. You can get and set values of properties, check to see if a model has a particular property, save models to the database, and many other similar things. Models have a couple of unique properties: id and cid. Each of these is used to uniquely identify the model in question—the difference between them is that the cid is a client id that is created as soon as the model is created, before information about it goes to the server and its actual id is assigned.

Models also have a number of Underscore methods assigned to them that make it easier to do things like validate attribute values, check to see if models have changed, clone models, and many other basic utility tasks.

In summary then, models are all about keeping track of and manipulating single pieces of data. While they’re similar to an individual list item, there’s a lot more going on there under the hood.

Collections

As you might expect, collections gather together models of the same type—they’re basically handy containers for dealing with a bunch of models all at once. You can define the type of models that get gathered into a collection, convert the collection into JSON, and define a comparator, which will determine how the models are sorted. There are also about twenty different Underscore methods that get brought in for collections, many of which revolve around doing very array-like things to Collections, like push, pop, slice, and so on.

One of the big benefits of collections is that (to quote the documentation) “Any event that is triggered on a model in a collection will also be triggered on the collection directly.” What this means is that if you have a single model that gets activated, you can make a change to an entire collection, allowing you to re-sort all of the transactions as soon as you change the value of one of them.

Views

Views have a lot to do with the layout of the site, but you shouldn’t confuse them with templates—they don’t really do the actual laying out of the data on the screen. Well, they can—you can have your view just spit out some HTML if you like, but that’s not generally how they’re used. Instead, they delegate that to something else, like a Handlebars template. The cool thing that views do is control when those templates get applied.

Essentially, you provide your view with a big list of events to listen for, and functions to run when those events happen. One of those possible functions is render, which would send a call with the current data to a Handlebars template or whatever else you’re using, and reload just the relevant section of the page, with the information that the client currently has. And that’s the really cool part about Backbone—the server is not involved in this bit at all. Everything happens on the client, which means things can be a lot faster.

Above, I mentioned “the relevant section of the page,” which is another important thing that you can set in the View. By default, this property (called el) is just a blank <div>, but you can set it to be any tag, with any specific id, class, or attribute you want.

And that about sums up this basic intro to Backbone concepts.  I hope it was as helpful to read as it was for me to write! For more info, I’d strongly suggest going to check out the documentation at backbonejs.org. It can be a bit terse, but it’s definitely a great resource.

Leave a Reply

Your email address will not be published. Required fields are marked *