SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
4.
A quick poll
Using DOM libraries?
Using (end-to-end) frameworks?
Know or used backbone.js?
@lmea #jsday http://joind.in/3360
5.
Backbone.js: what is it?
A lightweight collection of tools
giving enough structure to help
building apps in the browser
without getting in the way
@lmea #jsday http://joind.in/3360
6.
Backbone.js: what is it for?
Data heavy pages
Frontends to (JSON) web services
CRUD-kind web apps
@lmea #jsday http://joind.in/3360
7.
Backbone.js: Model-View-Controller
model
view controller
@lmea #jsday http://joind.in/3360
8.
Elements of backbone
Model
Collection
View
Controller
@lmea #jsday http://joind.in/3360
9.
Elements of backbone (2)
Event
Sync
History
@lmea #jsday http://joind.in/3360
10.
Model & Collection
Representing the data
Building the business logic
Handling persistence
@lmea #jsday http://joind.in/3360
11.
The simplest model
var Talk = Backbone.Model.extend({})
@lmea #jsday http://joind.in/3360
12.
Initializing & setting defaults
var Talk = Backbone.Model.extend({
// Default attributes for Talk
defaults: {
title: "a talk",
speaker: "me",
lenght: 60
},
intialize: function(){
if (this.length>10) {
this.set({"lightining": false});
}
},
})
@lmea #jsday http://joind.in/3360
13.
Assorted CRUD methods
var my_talk = new Talk({title: "A Little Backbone"});
my_talk.get("title");
my_talk.set({"speaker":"Luca Mearelli"});
if(my_talk.has("video")){
//...
};
my_talk.unset("speaker")
my_talk.id
my_talk.cid
@lmea #jsday http://joind.in/3360
15.
Validating models
var Talk = Backbone.Model.extend({
validate: function(attrs) {
if (_.isEmpty(attrs.title)) {
return "The title should be defined";
}
if (attrs.lenght>60) {
return "The maximum lenght is 60 minutes";
}
}
});
my_talk.bind("error", function(model, error) {
alert(model.full_info() + " " + error);
});
my_talk.set({"lenght":120});
@lmea #jsday http://joind.in/3360
17.
Backbone.sync
Backbone.sync = function(method, model, options) {
switch (method) {
case "read": ... break; // read ! GET /collection[/id]
case "create": ... break; // create ! POST /collection
case "update": ... break; // update ! PUT /collection/id
case "delete": ... break; // delete ! DELETE /collection/id
}
};
// to emulate put & delete with post + parameter
Backbone.emulateHTTP = true;
@lmea #jsday http://joind.in/3360
18.
Models collection
var Track = Backbone.Collection.extend({
model: Talk
});
var track_talks = new Track([talk1, talk2, talk3]);
track_talks.get(talk2.id); // gets talk2
track_talks.at(0); // gets talk1
track_talks.lenght; // is 3
@lmea #jsday http://joind.in/3360
19.
Collection: adding and removing models
track_talks.add(
{title:"JavaScript Survival Guide",speaker:"Giordano Scalzo " }
);
track_talks.add([
{title: "Faster Web Sites 2.0", speaker: "Steve Souders" },
{title: "HTML5, the current status", speaker:"Patrick H. Lauke"}
]);
track_talks.remove(talk1);
track_talks.remove([talk2, talk3]);
track_talks.refresh([
{title:"Javascript the New Parts",speaker: "Federico Galassi" }
]);
@lmea #jsday http://joind.in/3360
20.
Fetching a collection from the server
var Track = Backbone.Collection.extend({
url: function(){
return "/tracks/"+this.get("number");
},
// or simply url: "/talks"
});
var track_talks = new Track({number: 1})
track_talks.fetch(); // calls model.parse(response)
@lmea #jsday http://joind.in/3360
23.
Views
is a small chunk of the page
has declarative event handling
acts like a view controller
@lmea #jsday http://joind.in/3360
24.
A basic view
// The DOM element for a talk
var TalkView = Backbone.View.extend({
//... is a div tag.
tagName: "div",
className: "a-talk-row",
render: function() {
$(this.el).html(this.model.full_info());
return this;
},
});
v = new TalkView({
model:my_talk,
id: 'talk-'+my_talk.id
});
@lmea #jsday http://joind.in/3360
25.
Declarative event handling
var TalkView = Backbone.View.extend({
// The DOM events specific to a talk.
events: {
"click .title" : "rateIt",
"click span.edit" : "edit",
"keypress input.title" : "saveOnEnter"
},
edit: function() {
$(this.el).addClass("editing");
this.$('input.title').focus();
},
saveOnEnter: function(e) { },
rateIt: function(e) { },
});
@lmea #jsday http://joind.in/3360
26.
Sub-view element selection
view.$(selector) // equivalent to $(selector, view.el)
this.$(".title").text()
this.$("li input[@name=email]")
this.$("div #start")
@lmea #jsday http://joind.in/3360
27.
Binding model events
var TrackView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'addOne', 'addAll', 'render');
this.collection.bind('add', this.addOne);
this.collection.bind('refresh', this.addAll);
this.collection.bind('all', this.render);
this.collection.fetch();
},
});
var current_track = new Track(...);
var track_view = new TrackView({collection: current_track })
@lmea #jsday http://joind.in/3360