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

Published on

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

No Downloads
Views
Total Views
3,788
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

×