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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
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!