1. Backbone.js
Simple Tutorial
by @fallroot

2. Backbone.js
Backbone supplies structure to JavaScript-heavy applications by
providing models with key-value binding and custom events, collections
with a rich API of enumerable functions, views with declarative event
handling, and connects it all to your existing application over a RESTful
JSON interface.

3. $ rails new todoapp Back-end
$ cd todoapp
$ rm public/index.html
$ rails g scaffold todo title:string done:boolean
• Ruby on Rails
$ rake db:migrate
• 3.1.0 RC5
$ rails s

4. <script type="text/template"></script> Dependency
<script src="jquery.js / zepto.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="my-scripts.js"></script>

5. var Item = Backbone.Model.extend({
urlRoot: '/todos'
POST
});
var item = new Item({
title: 'Create new todo'
});
• Backbone.Model.extend(properties,
item.save();
[classProperties])
• model.save([attributes], [options])
• model.url()
• model.urlRoot
• /urlRoot/id

6. var Item = Backbone.Model.extend({
urlRoot: '/todos'
PUT
});
var item = new Item({
title: 'Create another todo'
});
• _.bind(function, object, [*arguments])
item.save(); • _.delay(function, wait, [*arguments])
var save = _.bind(item.save, item);
_.delay(save, 5000, {title: 'Title updated'});

7. var Item = Backbone.Model.extend({
urlRoot: '/todos'
DELETE
});
var item = new Item({
title: 'This will be deleted'
});
• model.destroy([options])
item.save();
_.delay(_.bind(item.destroy, item), 5000);

8. var Item = Backbone.Model.extend({
urlRoot: '/todos'
GET
});
var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function() { • Backbone.View.extend(properties,
this.model.bind('change', this.render, this);
[classProperties])
},
• model.fetch([options])
render: function() {
this.el.innerHTML = this.model.get('title');
• model.get(attribute)
return this; • object.bind(event, callback, [context])
}
});
var item = new Item({id: 1});
item.fetch();
var itemView = new ItemView({model: item});
$('#todos').append(itemView.el);

9. var Item = Backbone.Model.extend(); Collection
var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function() {
this.model.bind('change', this.render, this);
}, • Backbone.Collection.extend(properties,
render: function() { [classProperties])
this.el.innerHTML = this.model.get('title');
return this;
• collection.fetch([options])
} • collection.model
});
• collection.url or collection.url()

10. var Item = Backbone.Model.extend();
var List = Backbone.Collection.extend({
Collection
var ItemView = Backbone.View.extend({
model: Item,
tagName: 'li',
url : '/todos'
});
initialize: function() {
var ListView = Backbone.View.extend({
this.model.bind('change', this.render, this);
}, el: $('#todos'), • Backbone.Collection.extend(properties,
initialize: function() {
render: function() {
this.collection.bind('reset', this.render, this); [classProperties])
this.el.innerHTML = this.model.get('title');
this.collection.fetch(); • collection.fetch([options])
return this;
},
} • collection.model
}); render: function() {
var el = this.el; • collection.url or collection.url()
this.collection.each(function(item) {
var itemView = new ItemView({model: item});
el.append(itemView.render().el);
});
return this;
}
});
new ListView({collection: new List});

11. var Router = Backbone.Router.extend({
routes: {
Router
'*action': 'actionCallback'
},
actionCallback: function(action) {
document.body.innerHTML = action;
} • Backbone.Router.extend(properties,
}); [classProperties])
var router = new Router(); • router.navigate(fragment, [triggerRoute])
Backbone.history.start(); • Backbone.history.start([options])
router.navigate('started', true);
• URL Fragment
var navigate = _.bind(router.navigate, router);
_.delay(navigate, 3000, 'moved', true); • history.pushState / popState
• window.onhashchange
• IE8
• polling if not supported

12. <script type="text/template" id="item-template">
<p class="done">
Template
<input type="checkbox" <% if (done) { %>checked<% } %>>
</p>
<p class="title"><%= title %></p>
<p class="commands">
<button class="edit">Edit</button>
<button class="remove">Remove</button>
</p> • _.template(templateString, [context])
</script>
• model.toJSON()

13. <script type="text/template" id="item-template">
<p class="done">
var Item = Backbone.Model.extend({
Template
<input type="checkbox" <% if (done) { %>checked<% } %>>
urlRoot: '/todos'
</p>
});
<p class="title"><%= title %></p>
<p class="commands">
var ItemView = Backbone.View.extend({
<button class="edit">Edit</button>
tagName: 'li',
<button class="remove">Remove</button>
</p>
template: _.template($('#item-template').html()),
• _.template(templateString, [context])
</script>
initialize: function() {
• model.toJSON()
this.model.bind('change', this.render, this);
},
render: function() {
this.el.innerHTML = this.template(this.model.toJSON());
return this;
}
});
var item = new Item({id: 1});
item.fetch();
var itemView = new ItemView({model: item});
$('#todos').append(itemView.el);

14. All Together

15. Conclusion
• For JavaScript Heavy Application
• Single-Page Application
• Skinny Back-end
• RESTful JSON Interface