Backbone Basics with Examples

03 Backbone
Framework Analysis
Public Code Repository

by
Sergey N. Bolshchikov
http://bolshchikov.net
sergey.bolshchikov@new-proimage.com
New ProImage, 2012

Outline
I. Introduction

II. Dependencies

III. Components
a. Model
b. Collection
c. View

IV. Utilities
a. Router
b. History

V. Conclusion

Shortly: 5 things
Backbone.js gives structure to web
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 API over
a RESTful JSON interface.

Shortly: 1

Shortly: 2

Shortly: 3

Shortly: 4

Shortly: 5
enumerable functions,views with

Dependencies

Backbone

Underscore json2.js [jQuery]

Model
Backbone model contains interactive data. It possess different useful properties
and methods:

● id - modelID
● idAttribute - databaseID
● get(attrName) - returns attribute value
● set(attrName, attrValue) - sets the value for the named attribute
● clear() - removes all model attributes
● toJSON() - return a copy of the model's attributes for JSON stringification
● url - relative URL where the model's resource would be located on the
server
● fetch() - gets the latest version of the model from the server
● save() - saves the model to the DB
● validate() - checks the given data before set() and save()

P.S. Almost never is predefined

Model
var GreetingModel = Backbone.Model.extend({
// defaults specify what attributes the model should
// posses upon creation
defaults: {
text: 'hello world'
}
});

var TodoModel = Backbone.Model.extend({
defaults: {
id: 1000,
done: false,
name: 'default task',
deadline: new Date()
}
});

Collection
Collections are ordered sets of models. It can be fetched from the server. Any
event that is triggered on a model in a collection will also be triggered on the
collection directly, for convenience.
● add()
● remove()

Comfortable backbone built data structure over models: array and stack.
● push()
● pop()
● unshift()
● shift()

Some handy methods:
● sort()
● where() - filters collection by given attribute
● fetch()

Collection
// Definitions
// Todo Model
var TodoModel = Backbone.Model.extend({
defaults: {
id: 1000,
done: false,
name: 'default task',
deadline: new Date()
}
});

// Todo Collection: ordered list of Todo models
var TodoCollection = Backbone.Collection.extend({
model: TodoModel
});

View
The most disputable component in the Backbone framework.
Camp I: "It's NOT a controller"
Camp II: "It's a controller"
Backbone Authors: "If it helps any, in Backbone, the View class can also be
thought of as a kind of controller, dispatching events that originate from the UI,
with the HTML template serving as the true view."

What it does in life:
● renders the template and generates html
● handles user-generated events

Attributes and Methods partially of view and controller:
● tagName - html tag for the generated view
● $el - cached jQuery DOM selector
● events: {} - hash of event
● render() - rendering method

View
var GreetingView = Backbone.View.extend({
// every view must have a specified render method
// otherwise nothing would be seen
render: function() {
$('p').html(this.model.get('text'));
return this;
}
});

var greet = new GreetingModel();

new GreetingView({model: greet}).render()

Hello world Example

View
var RecordView = Backbone.View.extend({
tagName: 'tr',
events: {
'click': 'performed'
},
initialize : function() {
this.model.bind('change', this.render, this);
},
var generatedHtml = _.template(this.template, {
id: this.model.get('id'),
done: this.model.get('done'),
name: this.model.get('name'),
deadline: this.model.get('deadline' )
});
$(this.el).html(generatedHtml );
return this;
},
performed: function() {
this.model.set('done', true);
}
});
Todo Example

View
var RecordView = Backbone.View.extend( {
tagName: 'tr',
events: {
},
initialize: function() {
},
deadline: this.model.get('deadline')
});
$(this.el).html(generatedHtml);
return this;
},
}
});

View
tagName: 'tr',
events: {
},
},
});
return this;
},
}
});

View
tagName: 'tr',
events: {
},
initialize: function() {
},
deadline: this.model.get('deadline' )
});
$(this.el).html(generatedHtml );
return this;
},
}
});

Template
Underscore templating engine by default. It's possible to connect any other.
<tr>
<td><%= id %></td>
<td><%= done %></td>
<td><%= name %></td>
<td><%= deadline %></td>
</tr>

● Mixes template with the data from a model
● Generates html
● Append is with DOM element
});
return this;
}, Todo Example

Event
Events is a module that can be mixed in to any object, giving the object the
ability to bind and trigger custom named events.

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
alert("Triggered " + msg);
});

object.trigger("alert", "an event");

Event Example

Router & History
Backbone.Router provides methods for routing client-side pages, and
connecting them to actions and events.

window.Router = Backbone.Router.extend({
routes: {
'': 'tree',
'folder/:name' : 'list'
},
this.headerView = new HeaderView ();
$('.header').html(this.headerView .render().el);
...
},
tree: function() {
...
},
list: function(name) {
...
}
});

Performance
● All modern browsers support, IE 8+

● Framework size: Backbone + Underscore = 89KB

● Application size: 330KB

Conclusion
● Lightweight

● Great momentum: many project, community support

● Good documentation

● Binds to any JS library

Backbone Basics with Examples

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Backbone Basics with Examples (20)

More from Sergey Bolshchikov (14)

Recently uploaded (20)

Backbone Basics with Examples