MENU

Backbone

Backbone.js gives structure to web applications:

A Model manages an internal table of data attributes and triggers "change" events when any of its data is modified. When a model changes, Backbone automatically updates the HTML of your application. Models handle syncing data with a persistence layer — usually a REST API with a backing database. Backbone displays data at the server-side with the same format written onthe client-side. Design your models as atomic reusable objects containing all the helpful functions for manipulating their bit of data. Models should be able to be passed around throughout your app and used anywhere that bit of data is needed.

A View is an atomic chunk of the user interface. It often renders the data from a specific model, or several models — but views can also be data-less chunks of UI that stand alone. Models should be generally unaware of views. Instead, views listen to the model "change" events and react or re-render themselves appropriately. Each View manages the rendering and user interaction within its own DOM element. If you're strict about not allowing views to reach outside of themselves, it helps keep your interface flexible — allowing views to be rendered in isolation in any place where they might be needed.

A Collection helps you deal with a group of related models, handling the loading and saving of new models to the server and providing helper functions for performing aggregations or computations against a list of models. Aside from their events, collections also proxy through all the events that occur to models within them, allowing you to listen in one place for any change that might happen to any model in the collection.

The Router updates the browser URL whenever the user goes to a new "place" in your app that they might want to bookmark or share. The Router detects changes to the URL — say, pressing the "Back" button — and can tell your application exactly where you are now.

To install Backbone:

Backbone.js has a soft dependency with jQuery and hard dependency with Underscore.js.Note that the techniques described in this chapter can be applied to any library other than Backbone too.