The document discusses the key components of Backbone.js including events, models, views, collections, and routers. It provides code examples for how to use events, define models and their methods, create views with associated events and templates, and set up routers with routes that call functions. The document also notes there are multiple ways to implement different aspects of Backbone and multiple sites that use Backbone in their applications.

1. Backbone
John Ashmead
Wednesday, May 2, 2012 1

2. MVC Abstraction Layer
• Events
• Models
• Views
• Collections
• Routers
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 2

3. Events
• Used for backbone’s events
• On, off, trigger
• You can role your own, e.g. “selected:true”
• Simple linked list
• Per instance
• Mixed into Models,Views, Collections, &
Routers
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 3

4. Event calls
object.on(event, callback, [context]);
// aka bind
object.off([event], [callback],
[context]);
// aka unbind
object.trigger(event, [*args]);
// event = name[:namespace]
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 4

5. Models
• A unique ‘cId’ supplied, you set ‘id’
• “change” events issued when you use get,
set to change (you can bypass)
• toJSON, fetch, parse, clone, previous,
previousAttributes, save, destroy, validate,
…
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 5

6. Model calls
var MasterPiece =
Backbone.Model.extend({
option1: value1,
initialize: function(arg1, …) {}
});
masterPiece1 = new MasterPiece();
masterPiece1.get('option1');
masterPiece1.set('option1', 'value1');
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 6

7. RESTful interface
• “Backbone.sync” is basic call
• Sends server a “POST”, “GET”, “PUT”, or
“DELETE”, depending on whether you have
requested a create, retrieve, update, or delete.
• If you define MasterPiece.url(), sync will talk to
url’s of the form it returns
• Example: /masterpieces/1
• “isNew” tracks status on client
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 7

8. Views
• Always gets a default ‘el’ DOM element
• Has view.$el defined as $(view.el) as well
• Use “setElement” to change its element
• Instantiate “render” method to get it to
work
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 8

9. View code
var Picture = Backbone.View.extend({
render: function(eventName) {
this.$el.html(this.template(
this.model.toJSON()));
return this;
},
events: {“change”: “render”},
template: _.template(“<div><%= title =%></
div>”),
close: {
this.$el.unbind();
this.$el.empty();
});
var picture1 = new Picture({ model:
monaLisa1 });
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 9

10. Collections
• Ordered sets of models
• Can be the “model” in a view
• Can be included in a model
• Usual functions, including most of
Underscore
• Models have a “collection” property, so
only one collection per model
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 10

11. Underscore
• Each, map, find, filter, reject,…
• First, last, flatten, uniq, …
• Memoize, delay, throttle, …
• Keys, values, extend, clone, defaults, …
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 11

12. Routers
• Keeps a map of hashtags to functions
• Calls the function
• Fires the event
• Uses the “hashchange” event from browser
or else polls the current location
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 12

13. Router code
var Dispatcher =
Backbone.Router.extend({
routes: {
“help”: “help”,
“search/:query”: “search”
},
help: function(){},
search: function(query){…}
);
Backbone.history.start(); //magic
<a href=”#/search/daVinci” />
dispatcher1.search(“daVinci”);
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 13

14. More than one way to do it
For views: model.view or
model.views[], or fire events, or
create “controller” object to
mediate, …
For sync: can sync per model, send
sets of requests, …
For events: can mixin to any JS
object, create custom events, …
For render: can use templates,
direct DOM manip, jQuery UI, …
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 14

15. More than one place that’s
using it
• LinkedIn Mobile
• Foursquare
• Khan Academy
• Groupon Now!
• Pandora
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 15

16. More than one place
it’s documented
• http://documentcloud.github.com/backbone/
• http://documentcloud.github.com/backbone/
docs/backbone.html
• http://backbonetutorials.com/
• http://blog.galk.me/post/17139384615/backbone-
js-tutorial-create-a-simple-twitter-search
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 16

17. Presented for your
consideration:
• Takes care of basics of MVC
• Small, clean, & friendly code
• Flexible
• Reduces need to figure this
stuff out yourself
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 17

18. Backbone.js
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 18