Your SlideShare is downloading. ×
0
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Overview of Backbone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Overview of Backbone

1,522

Published on

What Backbone.js is, how to use it in building websites, MVC architecture, RESTful abstractions, …

What Backbone.js is, how to use it in building websites, MVC architecture, RESTful abstractions, …

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,522
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Backbone John AshmeadWednesday, May 2, 2012 1
  • 2. MVC Abstraction Layer • Events • Models • Views • Collections • Routersjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, 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, & Routersjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, 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/2012Wednesday, 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/2012Wednesday, 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/2012Wednesday, 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 clientjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, 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 workjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, 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/2012Wednesday, 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 modeljohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, 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/2012Wednesday, 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 locationjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, 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/2012Wednesday, 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/2012Wednesday, May 2, 2012 14
  • 15. 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
  • 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-searchjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, 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 yourselfjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 17
  • 18. Backbone.jsjohn.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012Wednesday, May 2, 2012 18

×