Working with Backbone.js and the Proxy

Series Overview

<< Making Backbone.js Work with     An Example Backbone/ App >>

In the last post, I presented some base prototypes for Backbone.js models and collections that play nicely with

Next, I will put all the pieces together and show how to use Backbone.js with  All of the code is available on GitHub.

Create an “App” on called “MyPeeps”

Once you crate the App, you will be given an Application Id and a Master Key which are essentially your user/password authentication for the site.

Set the ApplicationID and MasterKey in the file

Create the model and collections (

The model and collection extends from ParseModel and ParseCollection described in the last post. =
  models: {}
  collections: {}

class app.models.Person extends Backbone.ParseModel
  urlRoot: "/data/People"

class app.collections.People extends Backbone.ParseCollection
  model: app.models.Person
  url: "/data/People"

Create index.html

  <script type="text/javascript" src="/vendor/jquery-1.6.2.js"></script>
  <script type="text/javascript" src="/vendor/underscore-1.1.7.js"></script>
  <script type="text/javascript" src="/vendor/backbone-0.5.3.js"></script>

  <script type="text/javascript" src="app.js"></script>
  Use the developer tools in your browser to play

Run the proxy server

Point your browser to http://localhost:3001. Open your console and start playing

Use your developer tools to create and work with your backbone models (created in


Create a new Person model with the attributes you want and save it.  The “People” class will get created on and the attributes will get populated. Everything is schema-less so it gets created on demand.


Create a new People collection and fetch the items.  When the server responds, you will see your new item in the collection with the attributes you set.


When you update the attributes on your Person model and save it, the updates will go back to


If you create a new Person model with a known id, you can fetch it from


If you don’t want your object anymore, you can destroy it.


A very useful feature of the API is the ability to query data.  To illustrate this, let’s populate the database with three Person models: Brian Genisio, Eli Genisio and Jon Doe.

I can pass a query parameter into the fetch function because Person derives from ParseModel.  Here, I am querying for any object in the database with a last attribute of “Genisio”.  Note that I only receive the two and Jon Doe is not retrieved.

Queries can be more complex.  Here is a similar query asking for all objects who’s last name attribute is not “Doe”.


I’ve illustrated how easy it is to use Backbone.js to work with the backend.  Everything available in the REST API is abstracted with the Model and Collection paradigm that Backbone provides.  By placing a small proxy between your HTML client and, you can quickly build single-paged applications and forget about the back-end. (For data-centric apps)

In my next post, I will give an example of a single-paged application that uses as the back-end.

Tags: , , , , , , ,

4 Responses to “Working with Backbone.js and the Proxy”

  1. [...] A Proxy Server for Working with Backbone.js and the Proxy [...]

  2. [...] « Working with Backbone.js and the Proxy [...]

  1. Looking forward to the next post!

Leave a Reply