• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Backbone Basics with Examples
 

Backbone Basics with Examples

on

  • 3,763 views

 

Statistics

Views

Total Views
3,763
Views on SlideShare
3,760
Embed Views
3

Actions

Likes
4
Downloads
76
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Backbone Basics with Examples Backbone Basics with Examples Presentation Transcript

    • 03 BackboneFramework AnalysisPublic Code Repository by Sergey N. Bolshchikov http://bolshchikov.net sergey.bolshchikov@new-proimage.com New ProImage, 2012
    • Outline I. Introduction II. DependenciesIII. Components a. Model b. Collection c. ViewIV. Utilities a. Router b. HistoryV. Conclusion
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • Dependencies Backbone Underscore json2.js [jQuery]
    • Backbone Components
    • 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
    • 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() }});
    • 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()
    • 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});
    • 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
    • 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
    • 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
    • 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); }});
    • 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); }});
    • 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); }});
    • 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); }});
    • 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); }});
    • 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
    • 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
    • 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) { ... }});​
    • 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 library