Ben Paddock
Software Developer
backbone js
BT OSMOSOFT 2013
A Lightning introduction...
Who wrote it
What it is
Why it was written
How to use it
Where to find out more
BT OSMOSOFT 2013
Who
Open source component of DocumentCloud
(They also wrote Underscore)
BT OSMOSOFT 2013
What
A JavaScript MV* Library
Pattern is up for debate but it certainly provides models and views
Collections, events, routing and data syncing is also provided
BT OSMOSOFT 2013
Why
Give structure to web applications
Not a framework - loosely opinionated set of classes with useful methods you extend to fit your needs
More than one way to do things
BT OSMOSOFT 2013
HOW
We will quickly look at creating and using:
Models
Collections
Views
Events
Routing
BT OSMOSOFT 2013
How
Extend a Backbone base class then instantiate when needed
Each class has some built-in methods that can be used as-is or overwritten
BT OSMOSOFT 2013
Models
var Tiddler = Backbone.Model.extend({
urlRoot: '/bags/tiddlyspace/tiddlers',
idAttribute: 'title',
defaults: {
'title': 'New Tiddler',
'text': '',
'tags': [],
'fields': {}
}
});
var tiddler = new Tiddler({ title: "Backbone JS" }):
tiddler.fetch({
success: function () {
//Do something with the loaded model
}
});
BT OSMOSOFT 2013
Collections
var Bag = Backbone.Collection.extend({
model: Tiddler,
url: '/bags/tiddlyspace/tiddlers'
});
var bag = new Bag();
bag.fetch({
success: function () {
//Do something with collection of models
}
});
bag.get("Backbone JS"); //Returns the "Backbone JS" model
bag.create({ title: "Require JS" }); //Create & add new model
BT OSMOSOFT 2013
Views
var ListItemView = Backbone.View.extend({
tagName: 'li',
template: _.template(listItemTemplate)
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
var listItemView = new ListItemView({ model: tiddler });
listItem.view.render().el //Returns the list item DOM snippet
BT OSMOSOFT 2013
What Defines a View?
A page?
A section of the page?
A single element?
var TiddlersListView = Backbone.View.extend({
tagName: 'ul',
render: function () {
_.each(this.collection.models, function (tiddler) {
$(this.el).append(
new ListItemView({ model: tiddler }).render().el
);
}, this);
return this;
}
});
var listView = new TiddlersListView({ collection: bag });
BT OSMOSOFT 2013
Events
var TiddlerEditView = Backbone.View.extend({
events: {
'click .submit-button': 'saveTiddler'
},
saveTiddler: function () {
this.model.set({
title: $('#tiddler-title').val(),
text: $('#tiddler-content').val(),
tags: $('#tiddler-tags').val().split(',')
});
this.model.save();
return false;
},
});
BT OSMOSOFT 2013
Routing
Used for application state and navigation
Most examples use views for controller logic
var AppRouter = Backbone.Router.extend({
routes:{
'home': 'home',
'tiddler/:title': 'getTiddler',
'tiddlers': 'getTiddlers',
'newTiddler': 'newTiddler'
},
getTiddler: function (title) {
//Load tiddler by title
//Create view and render
}
app/#tiddler/NewTiddler -> getTiddler("NewTiddler")
BT OSMOSOFT 2013
Where
http://backbonejs.org
http://addyosmani.github.com/backbone-fundamentals
https://github.com/pads/TiddlyBone
https://github.com/pads/yap
BT OSMOSOFT 2013
Fin
BT OSMOSOFT 2013
backbone js
By Ben Paddock
