Your SlideShare is downloading. ×
Backbone Basics with Examples
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

Backbone Basics with Examples

3,741

Published on

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

No Downloads
Views
Total Views
3,741
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
82
Comments
0
Likes
4
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. 03 BackboneFramework AnalysisPublic Code Repository by Sergey N. Bolshchikov http://bolshchikov.net sergey.bolshchikov@new-proimage.com New ProImage, 2012
  • 2. Outline I. Introduction II. DependenciesIII. Components a. Model b. Collection c. ViewIV. Utilities a. Router b. HistoryV. Conclusion
  • 3. Shortly: 5 thingsBackbone.js gives structure to webapplications by providing models withkey-value binding and custom events,collections with a rich API ofenumerable functions, views withdeclarative event handling, andconnects it all to your existing API overa RESTful JSON interface.
  • 4. Shortly: 1Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,collections with a rich API ofenumerable functions, views withdeclarative event handling, andconnects it all to your existing API overa RESTful JSON interface.
  • 5. Shortly: 2Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,collections with a rich API ofenumerable functions, views withdeclarative event handling, andconnects it all to your existing API overa RESTful JSON interface.
  • 6. Shortly: 3Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,collections with a rich API ofenumerable functions, views withdeclarative event handling, andconnects it all to your existing API overa RESTful JSON interface.
  • 7. Shortly: 4Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,collections with a rich API ofenumerable functions, views withdeclarative event handling, andconnects it all to your existing API overa RESTful JSON interface.
  • 8. Shortly: 5Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,collections with a rich API ofenumerable functions,views withdeclarative event handling, andconnects it all to your existing API overa RESTful JSON interface.
  • 9. Dependencies Backbone Underscore json2.js [jQuery]
  • 10. Backbone Components
  • 11. ModelBackbone model contains interactive data. It possess different useful propertiesand methods:● id - modelID● idAttribute - databaseID● get(attrName) - returns attribute value● set(attrName, attrValue) - sets the value for the named attribute● clear() - removes all model attributes● toJSON() - return a copy of the models attributes for JSON stringification● url - relative URL where the models resource would be located on the server● fetch() - gets the latest version of the model from the server● save() - saves the model to the DB● validate() - checks the given data before set() and save()P.S. Almost never is predefined
  • 12. Modelvar GreetingModel = Backbone.Model.extend({ // defaults specify what attributes the model should // posses upon creation defaults: { text: hello world }});var TodoModel = Backbone.Model.extend({ defaults: { id: 1000, done: false, name: default task, deadline: new Date() }});
  • 13. CollectionCollections are ordered sets of models. It can be fetched from the server. Anyevent that is triggered on a model in a collection will also be triggered on thecollection directly, for convenience. ● add() ● remove()Comfortable backbone built data structure over models: array and stack. ● push() ● pop() ● unshift() ● shift()Some handy methods: ● sort() ● where() - filters collection by given attribute ● fetch()
  • 14. Collection// Definitions// Todo Modelvar TodoModel = Backbone.Model.extend({ defaults: { id: 1000, done: false, name: default task, deadline: new Date() }});// Todo Collection: ordered list of Todo modelsvar TodoCollection = Backbone.Collection.extend({ model: TodoModel});
  • 15. ViewThe most disputable component in the Backbone framework.Camp I: "Its NOT a controller"Camp II: "Its a controller"Backbone Authors: "If it helps any, in Backbone, the View class can also bethought of as a kind of controller, dispatching events that originate from the UI,with the HTML template serving as the true view."What it does in life:● renders the template and generates html● handles user-generated eventsAttributes and Methods partially of view and controller: ● tagName - html tag for the generated view ● $el - cached jQuery DOM selector ● events: {} - hash of event ● render() - rendering method
  • 16. Viewvar GreetingView = Backbone.View.extend({ // every view must have a specified render method // otherwise nothing would be seen render: function() { $(p).html(this.model.get(text)); return this; }});var greet = new GreetingModel();new GreetingView({model: greet}).render()​ Hello world Example
  • 17. Viewvar RecordView = Backbone.View.extend({ tagName: tr, events: { click: performed }, initialize : function() { this.model.bind(change, this.render, this); }, render: function() { var generatedHtml = _.template(this.template, { id: this.model.get(id), done: this.model.get(done), name: this.model.get(name), deadline: this.model.get(deadline ) }); $(this.el).html(generatedHtml ); return this; }, performed: function() { this.model.set(done, true); }}); Todo Example
  • 18. Viewvar RecordView = Backbone.View.extend( { tagName: tr, events: { click: performed }, initialize: function() { this.model.bind(change, this.render, this); }, render: function() { var generatedHtml = _.template(this.template, { id: this.model.get(id), done: this.model.get(done), name: this.model.get(name), deadline: this.model.get(deadline) }); $(this.el).html(generatedHtml); return this; }, performed: function() { this.model.set(done, true); }});
  • 19. Viewvar RecordView = Backbone.View.extend( { tagName: tr, events: { click: performed }, initialize: function() { this.model.bind(change, this.render, this); }, render: function() { var generatedHtml = _.template(this.template, { id: this.model.get(id), done: this.model.get(done), name: this.model.get(name), deadline: this.model.get(deadline) }); $(this.el).html(generatedHtml); return this; }, performed: function() { this.model.set(done, true); }});
  • 20. Viewvar RecordView = Backbone.View.extend( { tagName: tr, events: { click: performed }, initialize: function() { this.model.bind(change, this.render, this); }, render: function() { var generatedHtml = _.template(this.template, { id: this.model.get(id), done: this.model.get(done), name: this.model.get(name), deadline: this.model.get(deadline) }); $(this.el).html(generatedHtml); return this; }, performed: function() { this.model.set(done, true); }});
  • 21. Viewvar RecordView = Backbone.View.extend( { tagName: tr, events: { click: performed }, initialize : function() { this.model.bind(change, this.render, this); }, render: function() { var generatedHtml = _.template(this.template, { id: this.model.get(id), done: this.model.get(done), name: this.model.get(name), deadline: this.model.get(deadline) }); $(this.el).html(generatedHtml); return this; }, performed: function() { this.model.set(done, true); }});
  • 22. Viewvar RecordView = Backbone.View.extend( { tagName: tr, events: { click: performed }, initialize: function() { this.model.bind(change, this.render, this); }, render: function() { var generatedHtml = _.template(this.template, { id: this.model.get(id), done: this.model.get(done), name: this.model.get(name), deadline: this.model.get(deadline ) }); $(this.el).html(generatedHtml ); return this; }, performed: function() { this.model.set(done, true); }});
  • 23. TemplateUnderscore templating engine by default. Its possible to connect any other.<tr> <td><%= id %></td> <td><%= done %></td> <td><%= name %></td> <td><%= deadline %></td></tr>​● Mixes template with the data from a model● Generates html● Append is with DOM elementrender: function() { var generatedHtml = _.template(this.template, { id: this.model.get(id), done: this.model.get(done), name: this.model.get(name), deadline: this.model.get(deadline) }); $(this.el).html(generatedHtml); return this; }, Todo Example
  • 24. EventEvents is a module that can be mixed in to any object, giving the object theability to bind and trigger custom named events.var object = {};_.extend(object, Backbone.Events);object.on("alert", function(msg) { alert("Triggered " + msg);});object.trigger("alert", "an event");​ Event Example
  • 25. Router & HistoryBackbone.Router provides methods for routing client-side pages, andconnecting them to actions and events.window.Router = Backbone.Router.extend({ routes: { : tree, folder/:name : list }, initialize : function() { this.headerView = new HeaderView (); $(.header).html(this.headerView .render().el); ... }, tree: function() { ... }, list: function(name) { ... }});​
  • 26. Performance● All modern browsers support, IE 8+● Framework size: Backbone + Underscore = 89KB● Application size: 330KB
  • 27. Conclusion● Lightweight● Great momentum: many project, community support● Good documentation● Binds to any JS library

×