Backbone.js is a JavaScript MVC framework that allows developers to build single page applications. It includes models, views, and controllers (routers). Models represent data, views display models, and routers handle navigation between views. Collections are groups of models that can be filtered, sorted, and manipulated. Views can display both individual models and entire collections. Events can be bound to views to handle user interactions. The framework uses a client-side routing system to change views based on the URL hash fragment.
2. Backbone.js
• Not a magic bullet.
• Not tiny once you make it useful (139kb).
• Not perfect, some things are hard.
• Not suitable for some applications.
3. Backbone.js
• MVC - Model,View, Controller
• (Backbone.js calls the controller a Router)
• Collections, Sync, History, and more
• Underscore.js, json2.js, jQuery (or Zepto)
4. Backbone.js
Models - Objects that represent a thing.
• Models are objects
• Core of Backbone.js
• Contains an array of attributes
• Listens for events
5. Backbone.js
Models - Objects that represent a thing.
var Cat = Backbone.Model.extend({
defaults: {
name: ‘Cat’,
breed: 'Moggy',
colour: ‘Ginger’,
legs: 4
},
initialize: function(data) {
},
});
6. Backbone.js
Using a model - Getting attributes.
var Purrkins = new Cat({
name: ‘Purrkins’,
});
console.log(Purrkins.get(“breed”)); //Moggy
console.log(Purrkins.get(“colour”)); //Ginger
console.log(Purrkins.get(“name”)); //Purrkins
7. Backbone.js
Using a model - Setting attributes.
Purrkins.set({name:‘Mister Purrkins’, age: 6});
console.log(Purrkins.get(“name”)); //Mister Purrkins
8. Backbone.js
Using a model - Saving.
• Saving a model is easy
• Backbone Sync
• Restful interface - GET, POST, PUT, DELETE
• Up to you to write the server side stuff
9. Backbone.js
Using a model - Saving to an API.
var Cat = Backbone.Model.extend({
url: ‘/api/cat/’,
defaults: {
name: ‘Cat’,
breed: 'Moggy',
colour: ‘Ginger’,
legs: 4
},
initialize: function(data) {
},
});
10. Backbone.js
Using a model - Saving to an API.
Purrkins.save({name:‘Mister Purrkins’, age: 6});
POST http://localhost/api/cat/
PAYLOAD: {
"name":"Mister Purrkins",
"breed":"Moggy",
"colour":"Ginger",
"legs":4,
“age”: 6
}
11. Backbone.js
Using a model - Validating.
• Should you just save everything?
• Models need to be validated
• No helper functions for validation
• Underscore.js provides some
12. Backbone.js
Using a model - Validating before saving.
var Cat = Backbone.Model.extend({
url: ‘/api/cat/’,
defaults: {
name: ‘Cat’,
breed: 'Moggy',
colour: ‘Ginger’,
legs: 4
},
initialize: function(data) {
},
validate: function(attrs) {
var errors = {};
if (attrs.age < 5) {
errors.age = ‘Must be below 5’;
}
if (!_.isEmpty(errors)) {
errors.invalid = true;
return errors;
}
},
});
13. Backbone.js
Using a model - Validating before saving.
Purrkins.save(
{age: 6},
success: function(){ console.log(‘Kitty saved’); },
error: function(model,error){
if (error.invalid==true) {
$.each(_.keys(error), function(i,el){
console.log(el+”:”+error[el]);
});
} else {
console.log(“Error status: ”+error.status);
console.log(“Error response: ”+error.responseText);
}
}
);
age:Must be below 5
14. Backbone.js
Using a model - API errors.
Purrkins.save(
{age: 4},
success: function(){ console.log(‘Kitty saved’); },
error: function(model,error){
if (error.invalid==true) {
$.each(_.keys(error), function(i,el){
console.log(el+”:”+error[el]);
});
} else {
console.log(“Error status: ”+error.status);
console.log(“Error response: ”+error.responseText);
}
}
);
Error status: 500
Error response: Internal Server Error - Database not found
15. Backbone.js
Collections - Groups of objects.
• Collections are ‘arrays’ of models
• Add, push, shift, pop, unshift, etc
• Built on Underscore.js
• Filter, sort, etc
16. Backbone.js
Collections - Groups of objects.
var Glaring = Backbone.Collection.extend({
model: Cat
});
Collective noun for a group of cats: a glaring
18. Backbone.js
Using a collection - Underscore.js rocks.
var TabbyCats = CrazyCatLady.where({colour: “Tabby”);
console.log(TabbyCats); //Napoleon, Josey
var fourorfivelegs = CrazyCatLady.filter(function(Cat){
var legs = cat.get(“legs”);
return (legs > 3 && legs < 6);
});
console.log(fourorfivelegs); //Napoleon, Coco, Charlie, Augustus
var names = CrazyCatLady.pluck(“name”);
console.log(names); //Purrkins, Napoleon, Josey, Coco, Charlie, Augustus
19. Backbone.js
Views - Displaying a model.
• Views are not HTML
• Views are a description of a model
• The HTML code comes from templates
• Works with any template system
20. Backbone.js
Views - Displaying a model.
var Catview = Backbone.View.extend({
initialize: function() {
_.bindAll( this, 'render' )
},
render: function() {
this.$el.html(templates.catview(this.model.toJSON()));
return this;
},
});
var c = new Catview({model: CrazyCatLady.get(1) });
$(‘div#cat’).html(c.render().el);
21. Backbone.js
Views - Displaying a collection.
• Collections can have views
• Actually a view containing views
• Nested? Sort of.
• Think in terms of partials/blocks
23. Backbone.js
Views - Displaying a collection.
var CatListView = Backbone.View.extend({
initialize: function(data) {
this.collection = data.collection;
this.collection.bind('add', this.addOne, this);
this.collection.bind('all', this.render, this);
this.collection.each(this.addOne);
},
render: function() {
},
addOne: function(cat) {
var view = new CatRowView({model:cat});
$("div#cats").append(view.render().el);
},
});
24. Backbone.js
Views - Displaying a collection.
var catslisting = new CatListView({collection: CrazyCatLady});
CatListView
CatRowView - Purrkins
CatRowView - Napoleon
CatRowView - Josey
CatRowView - Coco
CatRowView - Charlie
CatRowView - Augustus
25. Backbone.js
Views - Binding events.
• Views are not just about displaying things
• Binding events to View elements
• Stuff happens when you click things
• Or double click, press a key, whatever
27. Backbone.js
Routing - Backbone.js’ controller.
var Router = Backbone.Router.extend({
routes: {
“/cats”: “cats”,
“/cats/:catid”: “catview”,
“*path”: “default”,
},
cats: function(){
//Something to do with cats
},
catview: function(catid){
//Something to do with a specific cat
},
default: function(path){
//Everything else
}
});
28. Backbone.js
Routing - Backbone.js’ controller.
cats: function(){
var catlisting = new CatList({ collection: CrazyCatLady });
$('div#content').html(catlisting.render().el);
},
catview: function(id){
var catview = new CatView({ model: CrazyCatLady.get(id) });
$('div#content').html(catview.render().el);
},
default: function(path){
var template = path.substr(1); //strip the initial /
if (template=='') { template = 'base'; }
ui.display(path, template);
},
29. Backbone.js
History - Handling hashchange events
Backbone.history.start();
Important notes:
• Must start after the router object.
• Must start after the HTML is done. Wrap it in
your favourite flavour of jQuery.ready();
• If you can get pushState to work, tell me how.