Backbone Overview

What is Backbone.js? According to their site: “Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”

To me, it’s few really well laid out objects that you can extend (make copies of) to fit your needs. There are 3 types.

Models: These are at the heart of the whole thing. Each model represents a singular entry or event, such as a song, a user, or a message.

Views: These are used to represent your models to the user of your app. Which is why they usualy contain a render() function. They are also in charge of collecting input from the user.

Collections: As the name implies, they are a collection of things. What things? Models or views.

Lets go over a fairly simple example of rendering an displaying the contents of an album. For spacial reasons, this album will only have 2 songs on it. Don’t worry, they are quality songs.

backbone_1

A few things to note:
Views either have a collection, or a model, that they reference.
Collections have a model that they reference.
So all views, at some point, will reference a model, either directly, or through a collection

Our album data would look something like [{title: “rockin intro”, length: “0:20″, url:”mysite.com/rockinintro”},{title: “outro”, length: “1:11″,url:”mysite.com/rockinoutro”}]

We passed our album data into the app (which is a model), as we instantiated (loaded) the app. The app then went and made the app view (which is a view). After that we created a new album collection from our album data with something like this: this.set(‘currentAlbum’, new Album(albumJSON)); which got called inside the initialize function.

We would have already told our album collection, that it is a set of songs. So the collection knows that when it gets created and passed a set of data, that the data should represent songs.

The collection then automatically goes and makes a model for each song.

–Will be updated with more, later.

Advertisements