Skip to main content

Development

Blog on Backbone with Underscore Js

Introduction to Backbone and Underscore js:

Level of expertise required to understand and implement: Experienced in JavaScript/Jquery

Concept

This blog is intended for experienced programmers in client side application with JavaScript/JQuery functionality and its integration with backbone and underscore js, by creating a simple project.

What is Backbone and Underscore?

In a rich client-side applications developers easily tend to bind the data to the DOM elements.   Easily the scripting gets messed up if there is no structure being followed while developing.  For example if a developer has written a script something like this in one of the js file.

$(‘div’).click(function(){

//do something

});

Every time you click on a div this function will fire up.  In rich client-side application with many js files, it will become a pain in the neck to identify where the click event is getting fired.  So it’s apparent that the client side programming needs a structured approach to avoid these situations.

Backbone is a MVP(Model-View-Presenter) framework where the data represents Models.  When the Model(Data) changes it just triggers the View to publish new data.  Here model handles all the business logic and just renders the data that need to be displayed in the view.  Backbone is javascript library that blends well with Jquery and Underscore.  Underscore js provides templates with utility functions.

The following are required for Development Environment set up:

  1. Java 6+
  2. Tomcat v5.0+
  3. Eclipse
  4. min.js(1.18+)
  5. js(1.2+)
  6. js(1.8+)
  7. bootstrap css

In this example, we will create a simple application to load the list of countries using Backbone and Underscore js where a list of 10 countries will be listed and when we click prev/next we will navigate to the appropriate page.  Here we are using just the basic features of Backbone.  To see the complete features please visit http://backbonejs.org/

Steps to implement:

First, create a dynamic web project with project structure as shown below.

1

After finish, it will be displayed as the image shown below.

2

Create index.html under WebContent folder.

3

Create css and js folders under WebContent folder. Paste the backbone.js, jquery.1.11.3.mins.js and underscore.js in js folder and bootstrap.css file in css folder.  All these files could be downloaded from their download sections.

4

Now include these files in index.html head section.

5

Create resources folder under WebContent and create countries.json file which has the list of countries in json format as shown in the image below.  We will be using this file to load the countries data using ajax.

6

Create templates folder under Webcontent and create table.html.  This is the html template which uses underscore js utility functions to display the table and list of countries.  This template is mapped to backbone view.

7

The image below shows the basic components of the js file where we initialized the objects for dashboard, views, models and collections.

8

Now create the DOM element where the template will get attached with the index.html and initiate the countries.js  country.dashboard.initialize() method.

9

The basic syntax for Backbone Model and View components were created as shown below.  We have created a model(TableModel) object and view(TableView) object.

10

Now create the json which represents the table headers and its attributes that will be processed in table.html template and configuration settings for backbone model.  As you can see in the image below ‘countryData’ is a json format which has the data for title, subtitle etc., that is passed to setMetaData method in countryModel.  A new object is created for TableView with the model object and the DOM element where the view will be rendered(id:dashboard-cell as mentioned in index.html);

11

As the setMetaData method is initiated, we set all the values in model using ‘this’.  Once the values are set in model we can invoke the loadRecords method where we will create a ajax request to load the countries.json and slice them with the start and end index(for ex: 20-30).  Once we set the data, we can trigger the “change” event in model which will be captured by the view.

12

Since we have triggered the change in model, it needs to be captured in the view.  In the image below we have TableView initialize method which has the “change” event bind to the model.  So when model changes the render method gets called and the template will be loaded with the model data.  Once the template get loaded it gets appended to the element (this.$el.html()).  We have validated the template load just to make sure not to load the template every time when the model gets changed.  We have also validated the ‘idx’ to show/hide the prev/next links.

13

Now select index.html and “run on server”.

14

It gets loaded like shown in the image below.  You can see the headers and table head with the data we set in the model and the list of countries(1-10) is displayed.  Though we have the “Next” link here it won’t work since we have not attached any event to it.  We shall address this in the next image.

15

Now we need to attach the events in view.  In backbone view we have a default method named “events” where we can attach the events with the following syntax (“event elementSelector” : “methodName”).  In the method nextClicked, we have incremented the idx value and just called the loadRecords() method where the cycle gets repeated as the model data get changed and trigger the change event and view just renders the new model data.

16

Below image shows that when Next link is clicked the next set of countries list is loaded.

17

References:

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Senthil Kumar Ellappan

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram