Backbone.js Cheat Sheet

A reference for Backbone.js Models, Collections, Views, and Routers for structuring lightweight, event-driven single-page applications.

1 PageIntermediateMar 10, 2026

Model & Collection

Defining a data model and a collection that syncs to a REST endpoint.

javascript

var Book = Backbone.Model.extend({  defaults: { title: 'Untitled', read: false },});var Library = Backbone.Collection.extend({  model: Book,  url: '/api/books',});var books = new Library();books.fetch();              // GET /api/booksbooks.add({ title: 'Dune' });

View

Binding a Model to the DOM with declarative events.

javascript

var BookView = Backbone.View.extend({  tagName: 'li',  events: {    'click .toggle-read': 'toggleRead',  },  initialize: function () {    this.listenTo(this.model, 'change', this.render);  },  render: function () {    this.$el.html(this.model.get('title'));    return this;  },  toggleRead: function () {    this.model.save({ read: !this.model.get('read') });  },});

Core Concepts

The four pieces that make up a Backbone application.

Model- represents a single data object, with get()/set(), validation, and REST sync
Collection- an ordered set of Models, with fetch(), add(), remove(), and Underscore methods
View- binds a Model/Collection to the DOM; a declarative 'events' hash maps DOM events to handlers
Router- maps URL fragments (hash or pushState) to handler functions via Backbone.history
Events mixin- listenTo()/trigger()/on() provide the pub-sub system used throughout Backbone
sync- the method Backbone calls to persist a Model/Collection, defaulting to REST over AJAX
Underscore.js- Backbone's one hard dependency, used for its utility functions

Router

Mapping URL fragments to handler functions.

javascript

var AppRouter = Backbone.Router.extend({  routes: {    '': 'index',    'books/:id': 'showBook',  },  index: function () { /* ... */ },  showBook: function (id) { /* ... */ },});new AppRouter();Backbone.history.start(); // start listening for hash/pushState changes

Pro Tip

Backbone does not auto-render -- you must explicitly re-render a View when its Model changes, typically with this.listenTo(this.model, 'change', this.render) in initialize, or the DOM will silently go stale after a model update.

Was this cheat sheet helpful?

Ember.js Cheat Sheet

Alpine.js Cheat Sheet