Post
Ask Question

Demonstrating Backbone.js: Create Students Directory Part 2

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 a previous article we learned how to create an outline of a Students Directory app. Here we will see how to use the generated JSON data in our app.

  •  Step 1: Now create a .json file using Notepad and copy the generated data to the .json file..

 
  

  •  Step 2 Now add an index.html page and create the UI 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.         <div class="tools">  
  12.             Search:<br />  
  13.             <input type="text" id="searchBox" /><br /><br />  
  14.             Filter:  
  15.             <div id="filters"></div>  
  16.             <div id="count"></div>  
  17.         </div>  
  18.         <ul id="listing"></ul>  
  19.     </div>  
  20.       
  21.     <script type="text/template" id="person-template">  
  22.         <span class="list-header"><%= firstname %> <%= lastname %> (<%= type %>)</span>  
  23.         <div class="details">  
  24.             home phone: <%= homephone %><br/>  
  25.             email: <a href="mailto:<%= email %>"><%= email %></a>  
  26.         </div>  
  27.     </script>  
  28.       
  29.     <script src="js/Studentdata.json" type="text/javascript"></script>  
  30.       
  31.     <script src="js/libraries/jquery-1.10.2.min.js" type="text/javascript"></script>  
  32.     <script src="js/libraries/underscore-min.js" type="text/javascript"></script>  
  33.     <script src="js/libraries/backbone-min.js" type="text/javascript"></script>  
  34.  </body>  
  35. </html> 
We will see the following output:
 
 
  •  Step 3 Create a folder named routers and add a router.js file with the following script:
  1. app = {  
  2.       
  3.     models: {},  
  4.     views: {},  
  5.     collections: {},  
  6.     routers: {},  
  7.     init: function() {}  
  8.       
  9. } 
  •  Step 4 Now let's create a model. Create a new folder named models in the solution and add a JavaScript file


 
 
 Now add the following script.
 
 Here we have created the fields in the model as in the JSON file and we have initialized a model. If the parent is not empty, that is a student, otherwise if it is empty then it is a parent. We have called a comparator to sort based on the last name.
 
  1. app = app || {};  
  2.   
  3. app.models.Person = Backbone.Model.extend({  
  4.     defaults: {  
  5.         'ID': '',  
  6.         'firstname': '',  
  7.         'lastname': '',  
  8.         'homephone': '',  
  9.         'email': '',  
  10.         'parent': ''  
  11.     },  
  12.       
  13.     initialize: function() {  
  14.         var self = this;  
  15.         if(this.get('parent') !== '') {  
  16.             self.set('type', 'student');  
  17.         } else {  
  18.             self.set('type', 'parent');  
  19.         }  
  20.     }  
  21.       
  22. });  
  23.   
  24. app.collections.People = Backbone.Collection.extend({  
  25.       
  26.     model: app.models.Person,  
  27.       
  28.     comparator: function(person) {  
  29.         return person.get('lastname');  
  30.     }  
  31.       
  32. }); 
 Summary

In this article we learned how to add the Model and Routers for the Students directory applicaiton.


Similar Articles