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

What is backbone.js

on

  • 290 views

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

Statistics

Views

Total Views
290
Slideshare-icon Views on SlideShare
290
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    What is backbone.js What is backbone.js Presentation Transcript

    • 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
    •  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
    •  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
    •  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.
    • User = Backbone.Model.extend({ initialize: function(){ alert(“User Created"); }, login: function(){ //Login code } }); //Instantiate and set attributes var user= new User({username: “johndoe”, email: “john@yahoo.com”}); //To get attributes var name = user.get(„username‟);
    •  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)
    •  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
    • 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", ...);
    •  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
    • <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>
    • <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 ); }
    • THAT‟S IT!