BackboneJs

2,156 views

Published on

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

No Downloads
Views
Total views
2,156
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

BackboneJs

  1. 1. Agenda By Jeremy Ashkenas SBR Department
  2. 2. Lightweight <ul><li>< 1200 Lines of code </li></ul><ul><li>No UI Widgets </li></ul><ul><li>Pre-requisites ( HTML , Css and Basic JavaScript) </li></ul><ul><li>Use Jquery and underscorejs Internally </li></ul>
  3. 3. Backbone.Model What do they do? <ul><li>Store Data </li></ul><ul><li>Fire Events when data is changed </li></ul><ul><li>Provide get/set Accessors </li></ul><ul><li>Does the data persistance ( save method ) </li></ul>
  4. 4. eg:Model <ul><li>GridModel = Backbone.Model.extend(); </li></ul><ul><li>Or </li></ul><ul><li>GridModel = Backbone.Model.extend({ </li></ul><ul><li>defaults:{ </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>var gridModel = new GridModel(); </li></ul><ul><li>gridModel. get (“key”); // only one level </li></ul><ul><li>gridModel. set ({“key”:”value”}); //does the writing </li></ul>
  5. 5. Backbone.View What do they do? <ul><li>Display data </li></ul><ul><li>Render data with template </li></ul><ul><li>Respond to model data changes </li></ul><ul><li>Act on user input entries </li></ul>
  6. 6. eg:View <ul><li>GridView = Backbone.View.extend({ </li></ul><ul><li>initialize:function(){ </li></ul><ul><li> _.bindAll(this, 'render','remove'); </li></ul><ul><li>this.template = _.template( $(“#grid-template”).html()); </li></ul><ul><li>}, </li></ul><ul><li>render:function(){ </li></ul><ul><li>var rc = this.template( this.model.toJSON()); </li></ul><ul><li>$(this.el).html( rc ); </li></ul><ul><li>return this; </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>var gridView = new GridView( {model:gridModel}); </li></ul>
  7. 7. Backbone.Collection What do they do? <ul><li>Listen to&quot;add&quot; and &quot;remove&quot; events </li></ul><ul><li>Fetch data model from server </li></ul><ul><li>Act on user input entries </li></ul>
  8. 8. Eg: Collection <ul><li>var GridModels = Backbone.Collection.extend({ </li></ul><ul><li>model:gridModel </li></ul><ul><li>}); </li></ul>
  9. 9. Backbone.Router What do they do? <ul><li>Routing the applications URL's when using hash tags(#). </li></ul><ul><li>Manage history </li></ul>
  10. 10. Extras <ul><li>Sinon.JS </li></ul>
  11. 11. Trends Support
  12. 12. Resources <ul><li>Official url for Backbone Js </li></ul><ul><li>http://documentcloud.github.com/backbone/ </li></ul>
  13. 13. Any questions?

×