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
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