Dugan Chen's Homepage

Various Things

Backbone.js and RESTful web services

One of the more interesting things about Backbone.js is its integration with RESTful web services.

Let’s say I have the following web services:

URL Verb Description
/entities GET fetch entities
/entities POST create entity
/entities/id PUT modify entity
/entities/id DELETE delete entity

And that each service takes JSON objects or arrays of objects, where each object has the following properties (with sample values):

    id: 1 // not needed for POST
    name: 'my name'

You can see that this is exactly what Backbone.js expects.

I knocked the service up in Django, then wrote the following front-end app to demonstrate it. Notice the use of jQuery templates.

<!DOCTYPE html>
<html lang="en">
		<title>Backbone.js REST Support Demo</title>
		<p><input id="new-name" type="text"><button id="add">Add</button></p>
		<div id="entities"></div>
	<script id="entity-template" type="x-jquery-tmpl">
		<input type="text" value="${name}">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
	<script src="{{ STATIC_URL }}underscore-min.js"></script>
	<script src="{{ STATIC_URL }}backbone-min.js"></script>
	<script src="{{ STATIC_URL }}rest.js"></script>
/*global Backbone, $, _ */

var Entities = {};

Entities.Collection = Backbone.Collection.extend({
	url: '/entities'

Entities.Views = {};

Entities.Views.Edit = Backbone.View.extend({
	change: function () {
			name: $(this.el).children('input').val()
	destroy: function () {
		var el = this.el;
			success: function () {
	events: {
		'click button': 'destroy',
		'change input': 'change'
	initialize: function () {
		_(this).bindAll('change', 'destroy', 'render');
	render: function () {

Entities.Views.List = Backbone.View.extend({
	append: function (model) {
		var p = $('<p>').appendTo('#entities'),
			view = new Entities.Views.Edit({
				model: model,
				el: p[0]
	initialize: function () {
		_(this).bindAll('append', 'render');
		this.collection.bind('refresh', this.render);
		this.collection.bind('add', this.append);
	render: function () {
		this.collection.each(function (model) {
		}, this);

$(function () {
	var collection = new Entities.Collection(),
		view = new Entities.Views.List({
			collection: collection

	$('#add').click(function () {
		var model = new Backbone.Model({
			name: $('#new-name').val()