Your SlideShare is downloading. ×
0
03 BackboneFramework AnalysisPublic Code Repository                                                               by      ...
Outline  I.   Introduction II.   DependenciesIII.   Components       a. Model       b. Collection       c. ViewIV.    Util...
Shortly: 5 thingsBackbone.js gives structure to webapplications by providing models withkey-value binding and custom event...
Shortly: 1Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,colle...
Shortly: 2Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,colle...
Shortly: 3Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,colle...
Shortly: 4Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,colle...
Shortly: 5Backbone.js gives structure to webapplications by providing models withkey-value binding and custom events,colle...
Dependencies               Backbone  Underscore    json2.js   [jQuery]
Backbone Components
ModelBackbone model contains interactive data. It possess different useful propertiesand methods:●   id - modelID●   idAtt...
Modelvar GreetingModel = Backbone.Model.extend({    // defaults specify what attributes the model should    // posses upon...
CollectionCollections are ordered sets of models. It can be fetched from the server. Anyevent that is triggered on a model...
Collection// Definitions// Todo Modelvar TodoModel = Backbone.Model.extend({    defaults: {        id: 1000,        done: ...
ViewThe most disputable component in the Backbone framework.Camp I:                 "Its NOT a controller"Camp II:        ...
Viewvar GreetingView = Backbone.View.extend({    // every view must have a specified render method    // otherwise nothing...
Viewvar RecordView = Backbone.View.extend({    tagName: tr,    events: {        click: performed    },    initialize : fun...
Viewvar RecordView = Backbone.View.extend( {    tagName: tr,    events: {        click: performed    },    initialize: fun...
Viewvar RecordView = Backbone.View.extend( {    tagName: tr,    events: {        click: performed    },    initialize: fun...
Viewvar RecordView = Backbone.View.extend( {    tagName: tr,    events: {        click: performed    },    initialize: fun...
Viewvar RecordView = Backbone.View.extend( {    tagName: tr,    events: {        click: performed    },    initialize : fu...
Viewvar RecordView = Backbone.View.extend( {    tagName: tr,    events: {        click: performed    },    initialize: fun...
TemplateUnderscore templating engine by default. Its possible to connect any other.<tr>    <td><%=   id %></td>    <td><%=...
EventEvents is a module that can be mixed in to any object, giving the object theability to bind and trigger custom named ...
Router & HistoryBackbone.Router provides methods for routing client-side pages, andconnecting them to actions and events.w...
Performance●   All modern browsers support, IE 8+●   Framework size: Backbone + Underscore = 89KB●   Application size: 330KB
Conclusion●   Lightweight●   Great momentum: many project, community support●   Good documentation●   Binds to any JS libr...
Upcoming SlideShare
Loading in...5
×

Backbone Basics with Examples

3,907

Published on

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

No Downloads
Views
Total Views
3,907
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Backbone Basics with Examples"

  1. 1. 03 BackboneFramework AnalysisPublic Code Repository by Sergey N. Bolshchikov http://bolshchikov.net sergey.bolshchikov@new-proimage.com New ProImage, 2012
  2. 2. Outline I. Introduction II. DependenciesIII. Components a. Model b. Collection c. ViewIV. Utilities a. Router b. HistoryV. Conclusion
  3. 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. 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. 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. 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. 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. 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. 9. Dependencies Backbone Underscore json2.js [jQuery]
  10. 10. Backbone Components
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Performance● All modern browsers support, IE 8+● Framework size: Backbone + Underscore = 89KB● Application size: 330KB
  27. 27. Conclusion● Lightweight● Great momentum: many project, community support● Good documentation● Binds to any JS library
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×