Your SlideShare is downloading. ×
  • Like
What is backbone.js
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

What is backbone.js


What is Backbone.js? …

What is Backbone.js?

Backbone.js is a JavaScript library which uses a RESTful JSON interface. Backbone is very lightweight as it is designed to build single page web apps

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. What is Backbone.js?
  • 2. Backbone.js is a JavaScript library which uses a RESTful JSON interface. Backbone is very lightweight as it is designed to build single page web apps
  • 3.  Representational State Transfer  Used for interacting with content on remote systems  Create, Read, Update and Delete using HTTP Requests GET, POST and PUT  Because REST is an architectural concept and not a standard, there are no set rules for how a client and service should use the set of HTTP verbs  RESTful message formats include JSON & XML
  • 4.  When using Backbone correctly, your data is structured into “Models” with key-value binding. Models can be created, updated, validated and destroyed.  Elements in the UI are used to trigger a change event to your models  When a change in the model is triggered, your views respond accordingly
  • 5.  Backbone models are for encapsulating entities that are associated with data  You extend Backbone.Model to provide a basic set of functionality for managing changes in data  They provide accessor and mutator access to the data through get() and set() methods.
  • 6. User = Backbone.Model.extend({ initialize: function(){ alert(“User Created"); }, login: function(){ //Login code } }); //Instantiate and set attributes var user= new User({username: “johndoe”, email: “”}); //To get attributes var name = user.get(„username‟);
  • 7.  Collections are ordered sets of models  Collections get all of the Underscore array/collection methods for convenient set manipulations. // Create an array of models that can be passed in to a collection var models = [ ] for (var i=0; i < 5; i++) { models.push(new Backbone.Model({ num: i }) } // Create collection containing the models var collection = new Backbone.Collection(models)
  • 8.  Events can be used with virtually any object  This allows the object to have the ability to bind and trigger custom named events  Similar to JQuery Event Binding
  • 9. var object = {}; _.extend(object, Backbone.Events); object.on("alert", function(msg) { alert("Triggered " + msg); }); object.trigger("alert", "an event"); //Can use namespaced if there are a large number on one page book.on("change:title change:author", ...);
  • 10.  Views are tied to the data/models that needs to be displayed to the user  In Backbone, views act like controllers as well, which is different than conventional MVC  Controllers and views are interactive  Views listen to events and act accordingly  Underscore.js is used for templating
  • 11. <div id=“userdiv"></div> <script type="text/javascript"> UserView = Backbone.View.extend({ initialize: function(){ alert(“Welcome to the user view"); } }); var user_view = new UserView({ el: $("#userdiv") }); </script>
  • 12. <script type="text/template" id=“user_template"> <ul> <li>Username:<%= user.get(„username') %></li> <li>Email: <%= user.get('email') %></li> </ul> </script> render: function(){ // Compile the template using underscore var template = _.template( $("#user_template").html(), {} ); // Load the compiled HTML into the Backbone "el" this.$el.html( template ); }
  • 13. THAT‟S IT!