An Example Backbone/ App

Series Overview

<< Working with Backbone.js and the Proxy    Hosting the Todos example on Heroku >>

This is the post where I put it all together.  I showed how to create a proxy to use as your data store.  I also showed how to modify Backbone.js to use  Now, I will show how easy it is to use Backbone.js models and collections with a service like  Note that is not the only service out there that does this.  StackMob is another example of a “place to put your stuff” service.  There are others.

In this app, I will borrow from the default Backbone.js example: Todos.  Todos is a simple to-do list, which uses the browser’s local storage to save data. 

I will adapt it to be hosted by the proxy that I showed in my previous post.  Instead of storing locally, the app will put push to  Want to play with it?  I have hosted everything on Heroku:

There are only a few tiny steps to make this work:

  1. Replace localstorage.js with
  2. Modify the model and collection to use instead of local storage
  3. Configure the proxy
  4. Run the proxy


1. Modify index.html

The example given with Backbone.js uses the “localstorage” override for Backbone.sync.  We want to use the default REST version Backbone.sync so we remove it.  We also want to use the base prototypes to adapt to Backbone.

<script src="backbone-localstorage.js"></script>

<script src=”"></script>

2a. Modify the model

The example uses a vanilla Backbone.Model.  Instead, change it to Backbone.ParseModel and give it the location of the data.

window.Todo = Backbone.Model.extend({

window.Todo = Backbone.ParseModel.extend({

    urlRoot: "/data/Todos",

2b. Modify the Collection

The example uses a Backbone.Collection.  Instead, change it to Backbone.ParseCollection and give it the location of the data.

window.TodoList = Backbone.Collection.extend({

window.TodoList = Backbone.ParseCollection.extend({

    url: "/data/Todos",

Also, since we aren’t using local storage, remove the localStore details.

localStorage: new Store("todos"),

3. Configure the App

That is all you need to do in order to modify the app.  Everything else is exactly the same.  You do, however, need to create an App at

Use the Application ID and Master Key and edit the file:

applicationID: 'APPLICATION ID'
masterKey:    'MASTER KEY'
apiPath:  '/data/'
port:     3001

4. Run the proxy:

> coffee

Test the app

Add items to your list.


See them show up in your data store.


That was insanely easy.  You just need to tell you models and collections to go to the server instead of local storage, configure the proxy and run it.  This solution installs well on Heroku as you can see.  This app wasn’t built with any type of user models, so everyone in the world gets to share Todos in this example… that can also be done with, but I that is a different post ☺.

If anyone finds this useful, I would be curious to know if it helps.  If you want the source code for this project, take a look at the GitHub project

As a bonus, I wrote up the modifications I needed to make in order to host the Parse-backed Todos example on Heroku. It was really easy and worth the writeup.

Tags: , , , , , , ,

2 Responses to “An Example Backbone/ App”

  1. [...] Making Backbone.js Work with An Example Backbone/ App [...]

Leave a Reply