Overview of Backbone

Backbone John AshmeadWednesday, May 2, 2012 1

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

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, & Routersjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 3

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/2012Wednesday, May 2, 2012 4

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/2012Wednesday, May 2, 2012 5

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/2012Wednesday, May 2, 2012 6

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 deﬁne MasterPiece.url(), sync will talk to url’s of the form it returns • Example: /masterpieces/1 • “isNew” tracks status on clientjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 7

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

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/2012Wednesday, May 2, 2012 9

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 modeljohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 10

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/2012Wednesday, May 2, 2012 11

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 locationjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 12

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/2012Wednesday, May 2, 2012 13

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/2012Wednesday, May 2, 2012 14

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

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-searchjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 16

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

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

Overview of Backbone

by akmed13

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Overview of Backbone Presentation Transcript