Post
Ask Question

Demonstrating Backbone.js: Create Students Directory Part 1

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create a students directory using backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of routers and collections. You can get them from the following:

In this article we will see how to use Backbone.js in a simple student directory app with sorting. Let us start with a step-by-step procedure. As I said, the complexity level is beginner.
  • Step 1: Create a new project; open Visual Studio 2013 then click on "File" -> "New" -> "Project..." then create a new "ASP.Net Empty WebApplication" then name it "StudentsDirectory".
          Create new Project
  • Step 2: Create folders css and js as shown below:

    Create folders css

    To implement Backbone.js we need to download the Backbone.js library and since Backbone.js is dependent on jQuery we need to use the jQuery library.
  •  Step 3: Add the jQuery, Backbone.js and Underscore.js libraries to the libraries folder as shown:

    libraries folder
  • Step 4: Add a HTML page and include all the libraries as in the following:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Student Directory with Backbone.js</title>  
  5.     <link href="css/style.css" rel="stylesheet" />  
  6. </head>  
  7. <body>  
  8.   
  9.     <div id="heading">  
  10.         <h1>Students Directory</h1>  
  11.   
  12.     </div>  
  13.     <script src="js/libraries/jquery-1.10.2.min.js" type="text/javascript"></script>  
  14.     <script src="js/libraries/underscore-min.js" type="text/javascript"></script>  
  15.     <script src="js/libraries/backbone-min.js" type="text/javascript"></script>  
  16.   
  17. </body>  
  18. </html>  
Before we proceed we actually need some data so we will generate JSON data using generatedata.com.
  •  Step 5 : Open generatedata.com and provide the fields as shown and click on "Generate".

    Open generatedata.com

    Copy the generated data to the Studentdata.json file.

    generated data
Summary

In this article we learned how to create an outline of a Students Directory app. In future articles we will add the Model,Views and Routers for filtering and sorting 


Similar Articles