Simple Master/Detail Rails example
Backbone.js 0.9.2 and Underscore.js 1.3.3
Initial asset pipeline setup

Add Backbone, Underscore, and Hogan to the asset pipeline.
Expose Movies as JSON objects

App is the namespace for our Backbone code. The JSON list of
movies is available as App.init, you can check this in your JS
console.
Render index using Hogan in the Browser

Mustache templates are organized under app/assets/javascripts/templates.
We are using 'hamstache', haml + mustache == awesome!
Render the list of movies with Backbone.View

Backbone.View#render does nothing by default, so we need to add our own
Mustache rendering code.

App.View is our custom view base class, we put all the rendering code
here.

App.Views.Index uses it to render our JSON list of movies.
Put Movies into a Backbone.Collection and render

The models are now in App.Collections.Movies, note that we had to
specify the URL.

App.CollectionView knows how to render a collection into an element, we
use the 'reset' event to render the full collection.

Add #show to App.View, use this instead of calling #render directly.
Add javascript-number-formatter

From http://code.google.com/p/javascript-number-formatter
Render individual Movies in the Collection

Presenter wraps a Model. Use it to expose a model's attributes nicely to
Mustache. Add presentation helper methods to the presenter, not the
model.

Like CollectionView, View takes a function to generate the presenter
during rendering. Prefer this kind of configuration to something more static like passing
the class name.
Bind an event for the link to a Movie's details

The details are still in the show Rails view.
Add new Movie form above the list

The form will not submit correctly, we can just show and hide it.
Add Backbone.Validations

From https://github.com/n-time/backbone.validations
Add Backbone.Syphon

From https://github.com/derickbailey/backbone.syphon
Add a new Movie using Backbone

App.FormView encapsulates Rails-like validation behavior; errors are
shown in-line with the form fields if there is a client-side validation
error. To support this, we mixin #errorMessageFor to Backbone.Model, so
that the validation error messages are defined on the model.

We are not waiting for the create to succeed (we do not use wait: true)!

The new Movie is available on a refresh of the index page.
Show added Movie immediately

We use Backbone's events to wire up our list so that it adds new movies.
Flash the new Movie when added

Implemented as another callback for the collection's 'add' event.
Sort Movies by opening weekend totals

And with very little code, we can have our list of Movies sort itself by
descending opening weekend totals.
Bootstrap the App using Backbone.Router

To support selecting Movies from the list, we add a SelectionModel to
track which model is selected in the Movies collection. It emits a
'select:none' event when no model is selected. This is a great example
of how easy it is to leverage Backbone.Events to add event support.

When the router triggers the listMovies route, we call #selectModel and
let any listeners react.

In this case, we bound a callback in main.js.
Rename Index view to List

We are preparing for a one-page app.
Show Movie detail with Backbone

We can navigate to a Movie's details without going back to the server.

The SelectionModel emits a 'select' event when we navigate to a Movie.

App.CollectionDetailView manages a set of child views, showing only one
at a time.

We wire up the list and detail views so that they show/hide in
synchrony, for example when we see the list, the detail hides.

And the detail view navigates back to the list without the need for a
server round-trip!