Download - Backbone Basics with Examples
![Page 1: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/1.jpg)
03 BackboneFramework AnalysisPublic Code Repository
bySergey N. Bolshchikov
http://[email protected]
New ProImage, 2012
![Page 2: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/2.jpg)
OutlineI. Introduction
II. Dependencies
III. Componentsa. Modelb. Collectionc. View
IV. Utilitiesa. Routerb. History
V. Conclusion
![Page 3: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/3.jpg)
Shortly: 5 things
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 4: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/4.jpg)
Shortly: 1
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 5: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/5.jpg)
Shortly: 2
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 6: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/6.jpg)
Shortly: 3
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 7: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/7.jpg)
Shortly: 4
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 8: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/8.jpg)
Shortly: 5
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
![Page 9: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/9.jpg)
Dependencies
Backbone
Underscore json2.js [jQuery]
![Page 10: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/10.jpg)
Backbone Components
![Page 11: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/11.jpg)
ModelBackbone model contains interactive data. It possess different useful properties and 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 model's attributes for JSON stringification● url - relative URL where the model's 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
![Page 12: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/12.jpg)
var 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() }});
Model
![Page 13: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/13.jpg)
CollectionCollections are ordered sets of models. It can be fetched from the server. Any event that is triggered on a model in a collection will also be triggered on the collection 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()
![Page 14: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/14.jpg)
// 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});
Collection
![Page 15: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/15.jpg)
ViewThe most disputable component in the Backbone framework.Camp I: "It's NOT a controller"Camp II: "It's a controller"Backbone Authors: "If it helps any, in Backbone, the View class can also be thought 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 events
Attributes 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
![Page 16: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/16.jpg)
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
![Page 17: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/17.jpg)
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
![Page 18: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/18.jpg)
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); }});
![Page 19: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/19.jpg)
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); }});
![Page 20: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/20.jpg)
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); }});
![Page 21: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/21.jpg)
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); }});
![Page 22: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/22.jpg)
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); }});
![Page 23: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/23.jpg)
TemplateUnderscore templating engine by default. It's 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 element
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;
}, Todo Example
![Page 24: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/24.jpg)
var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) { alert("Triggered " + msg);});
object.trigger("alert", "an event");
Event Example
EventEvents is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events.
![Page 25: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/25.jpg)
Router & HistoryBackbone.Router provides methods for routing client-side pages, and connecting 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) { ... }});
![Page 26: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/26.jpg)
Performance● All modern browsers support, IE 8+
● Framework size: Backbone + Underscore = 89KB
● Application size: 330KB
![Page 27: Backbone Basics with Examples](https://reader033.vdocuments.us/reader033/viewer/2022051107/540558288d7f729b768b4c80/html5/thumbnails/27.jpg)
Conclusion● Lightweight
● Great momentum: many project, community support
● Good documentation
● Binds to any JS library