Backbone JS Simple Application

BackboneJS is a light weight JavaScript library that allows to develop and structure client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM into views and bind these two using events.

This example illustrates the Simple Backbone JS application.

The main components of Backbone JS we’ve used here are :
1. Backbone View
2. Backbone Model

At first, we need to include the scripts needed for Backbone JS in the Html file. Underscore JS is the only hard dependency for the Backbone JS.

We can include any other JS libraries if it is necessary. Here we’ve included JQuery which is common.
Let’s look at the “index.html” file. It’s a very basic well known div element with username and password.
As of now, we’ve not separated HTML View part in a different file.

index.html

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Backbone Tutorial ONE</title>  
 <script src="js/libs/jquery.js"></script>  
 <script src="js/libs/underscore.js"></script>  
 <script src="js/libs/backbone.js"></script>  
 <script src="js/UserView.js"></script>  
 <script src="js/UserModel.js"></script>  
 <script src="js/main.js"></script>  
 <div id="appArea">  
 <label for="userNameText">Enter User Name :</label><input type="text" id="userNameText">  
 <label for="passwordText">Enter Password :</label><input type="password" id="passwordText">  
 <button id="submitButton">Submit</button>  
 </div>

Now, create a Backbone View named “UserView.js” for this screen. In the UserView.js file, we’ve added the events and we do have initialize method. Blur event listener added for userNameText field.

UserView.js

 var UserView = Backbone.View.extend({  
  events : {  
  'blur #userNameText':'onUserNameBlur',  
  'click #submitButton':'onSubmit'  
  },  
  onUserNameBlur : function(e){  
  var value = $(e.currentTarget).val().trim();  
  $(e.currentTarget).val(value);  
  },  
  render : function(){  
  //Empty implementation  
  },  
  onSubmit : function(){  
  var userModel = new UserModel();  
  userModel.set("userName",$('#userNameText').val());  
  userModel.set("password",$('#password').val());  
  userModel.save({  
   success : function(response){  
   alert("Success");  
   },  
   error : function(response){  
   alert("Error");  
   }  
  });  
  }  
 });

In the “UserModel.js” file, just simply added two parameters with userName and password.

UserModel.js

 var UserModel = Backbone.Model.extend({  
  initialize : function(){  
  },  
  defaults : {  
  userName : '',  
  password : ''  
  },  
  url : 'http://localhost:8080/backbone/login'  
 });

So now we’ve a html file, a Backbone View file and a Backbone Model file. Now we need to execute the methods in UserView.js. In Backbone, events will bind for the elements only in the “el” element.
There are two ways to set el element. Either we can set el : “elementId” or else we can set the element by calling the setElement method. In this example, setElement method is used.

main.js

 $(document).ready(function(){  
  var userView = new UserView();  
  userView.setElement($('#appArea'));  
 });

Now the el element is set to appArea. So events are binded with those elements.
If Submit button is clicked, onSubmit function will be triggered and Backbone Model will be triggered.

You can download this sample in the following URL. Github

Published By