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