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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

What is backbone.js


Published on

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

  • 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!