Post
Ask Question

Demonstrating Backbone.js: Create Students Directory Part 3

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 the router and model of a Students Directory app. Here we will see how to create the views.

  • Step 1: Create a folder named views and create a person-views.js file.

Here we made a view for an individual person and we have set the attributes.

 

  1. app = app || {};  
  2.   
  3. app.views.Person = Backbone.View.extend({  
  4.     tagName: 'li',  
  5.   
  6.     attributes: function () {  
  7.         return {  
  8.             class: 'person ' + this.model.get('type')  
  9.         };  
  10.     },  
  11.   
  12.     events: {  
  13.         'click .list-header': 'showDetails'  
  14.     },  
  15.   
  16.     template: _.template($('#person-template').html()),  
  17.   
  18.     render: function () {  
  19.         this.$el.html(this.template(this.model.toJSON()));  
  20.         return this;  
  21.     },  
  22.   
  23.     showDetails: function (e) {  
  24.         $(e.target).toggleClass('active');  
  25.         $(e.target).siblings('.details').slideToggle('fast');  
  26.     }  
  27.   
  28. });  
  29.   
  30. app.views.People = Backbone.View.extend({  
  31.   
  32.     el: '#wrapper',  
  33.   
  34.     initialize: function (data) {  
  35.         this.collection = new app.collections.People(data);  
  36.         this.render();  
  37.   
  38.         this.$el.find('#filters').append(this.createFilters());  
  39.   
  40.         this.on('change:searchFilter', this.filterBySearch, this);  
  41.         this.on('change:filterType', this.filterByType, this);  
  42.   
  43.         this.collection.on('reset', this.render, this);  
  44.     },  
  45.   
  46.     events: {  
  47.         'keyup #searchBox': 'searchFilter',  
  48.         'click a.filter': 'setFilter'  
  49.     },  
  50.   
  51.     render: function () {  
  52.         var self = this;  
  53.         $('#listing').empty();  
  54.         _.each(this.collection.models, function (person) {  
  55.             self.renderPerson(person);  
  56.         }, this);  
  57.     },  
  58.   
  59.     renderPerson: function (person) {  
  60.         var newperson = new app.views.Person({  
  61.             model: person  
  62.         });  
  63.         $('#listing').append(newperson.render().el);  
  64.     },  
  65.   
  66.     getTypes: function () {  
  67.         return _.uniq(this.collection.pluck('type'));  
  68.     },  
  69.   
  70.     setListLength: function (l) {  
  71.         $('#count').html(l);  
  72.     },  
  73.   
  74.     createFilters: function () {  
  75.         var filters = '<a class="filter" href="#all">all</a>';  
  76.         _.each(this.getTypes(), function (item) {  
  77.             filters += '<a class="filter" href="#' + item + '">' + item + '</a>';  
  78.         });  
  79.         return filters;  
  80.     },  
  81.   
  82.     searchFilter: function (e) {  
  83.         this.searchFilter = e.target.value;  
  84.         this.trigger('change:searchFilter');  
  85.     },  
  86.   
  87.     setFilter: function (e) {  
  88.         e.preventDefault();  
  89.         this.filterType = e.currentTarget.innerHTML;  
  90.         this.trigger('change:filterType');  
  91.     },  
  92.   
  93.     filterBySearch: function () {  
  94.         this.collection.reset(directoryData, { silent: true });  
  95.         var filterString = this.searchFilter,  
  96.             filtered = _.filter(this.collection.models, function (item) {  
  97.                 return item.get('lastname').toLowerCase().indexOf(filterString.toLowerCase()) !== -1;  
  98.             });  
  99.         this.setListLength(filtered.length);  
  100.         this.collection.reset(filtered);  
  101.     },  
  102.   
  103.     filterByType: function () {  
  104.         if (this.filterType === 'all') {  
  105.             this.collection.reset(directoryData);  
  106.             this.setListLength(this.collection.length);  
  107.             appRouter.navigate('filter/all');  
  108.         } else {  
  109.             this.collection.reset(directoryData, { silent: true });  
  110.             var filterType = this.filterType,  
  111.                 filtered = _.filter(this.collection.models, function (item) {  
  112.                     return item.get('type') === filterType;  
  113.                 });  
  114.             this.setListLength(filtered.length);  
  115.             this.collection.reset(filtered);  
  116.             appRouter.navigate('filter/' + filterType);  
  117.         }  
  118.     }  
  119.   
  120. }); app = app || {};  
  121.   
  122. app.views.Person = Backbone.View.extend({  
  123.     tagName: 'li',  
  124.   
  125.     attributes: function () {  
  126.         return {  
  127.             class: 'person ' + this.model.get('type')  
  128.         };  
  129.     },  
  130.   
  131.     events: {  
  132.         'click .list-header': 'showDetails'  
  133.     },  
  134.   
  135.     template: _.template($('#person-template').html()),  
  136.   
  137.     render: function () {  
  138.         this.$el.html(this.template(this.model.toJSON()));  
  139.         return this;  
  140.     },  
  141.   
  142.     showDetails: function (e) {  
  143.         $(e.target).toggleClass('active');  
  144.         $(e.target).siblings('.details').slideToggle('fast');  
  145.     }  
  146.   
  147. });  
  148.   
  149. app.views.People = Backbone.View.extend({  
  150.   
  151.     el: '#heading',  
  152.   
  153.     initialize: function (data) {  
  154.         this.collection = new app.collections.People(data);  
  155.         this.render();  
  156.   
  157.         this.$el.find('#filters').append(this.createFilters());  
  158.   
  159.         this.on('change:searchFilter', this.filterBySearch, this);  
  160.         this.on('change:filterType', this.filterByType, this);  
  161.   
  162.         this.collection.on('reset', this.render, this);  
  163.     },  
  164.   
  165.     events: {  
  166.         'keyup #searchBox': 'searchFilter',  
  167.         'click a.filter': 'setFilter'  
  168.     },  
  169.   
  170.     render: function () {  
  171.         var self = this;  
  172.         $('#listing').empty();  
  173.         _.each(this.collection.models, function (person) {  
  174.             self.renderPerson(person);  
  175.         }, this);  
  176.     },  
  177.   
  178.     renderPerson: function (person) {  
  179.         var newperson = new app.views.Person({  
  180.             model: person  
  181.         });  
  182.         $('#listing').append(newperson.render().el);  
  183.     },  
  184.   
  185.     getTypes: function () {  
  186.         return _.uniq(this.collection.pluck('type'));  
  187.     },  
  188.   
  189.     setListLength: function (l) {  
  190.         $('#count').html(l);  
  191.     },  
  192.   
  193.     createFilters: function () {  
  194.         var filters = '<a class="filter" href="#all">all</a>';  
  195.         _.each(this.getTypes(), function (item) {  
  196.             filters += '<a class="filter" href="#' + item + '">' + item + '</a>';  
  197.         });  
  198.         return filters;  
  199.     },  
  200.   
  201.     searchFilter: function (e) {  
  202.         this.searchFilter = e.target.value;  
  203.         this.trigger('change:searchFilter');  
  204.     },  
  205.   
  206.     setFilter: function (e) {  
  207.         e.preventDefault();  
  208.         this.filterType = e.currentTarget.innerHTML;  
  209.         this.trigger('change:filterType');  
  210.     },  
  211.   
  212.     filterBySearch: function () {  
  213.         this.collection.reset(directoryData, { silent: true });  
  214.         var filterString = this.searchFilter,  
  215.             filtered = _.filter(this.collection.models, function (item) {  
  216.                 return item.get('lastname').toLowerCase().indexOf(filterString.toLowerCase()) !== -1;  
  217.             });  
  218.         this.setListLength(filtered.length);  
  219.         this.collection.reset(filtered);  
  220.     },  
  221.   
  222.     filterByType: function () {  
  223.         if (this.filterType === 'all') {  
  224.             this.collection.reset(directoryData);  
  225.             this.setListLength(this.collection.length);  
  226.             appRouter.navigate('filter/all');  
  227.         } else {  
  228.             this.collection.reset(directoryData, { silent: true });  
  229.             var filterType = this.filterType,  
  230.                 filtered = _.filter(this.collection.models, function (item) {  
  231.                     return item.get('type') === filterType;  
  232.                 });  
  233.             this.setListLength(filtered.length);  
  234.             this.collection.reset(filtered);  
  235.             appRouter.navigate('filter/' + filterType);  
  236.         }  
  237.     }  
  238.   
  239. });  

 

  •   Step 2 Now include the scripts in index.html.

 

  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">  
  16.                 <!--<a class="filter" href="#all">all</a>  
  17.                 <a class="filter" href="#parent">parent</a>  
  18.                 <a class="filter" href="#student">student</a>-->  
  19.             </div>  
  20.             <div id="count"></div>  
  21.         </div>  
  22.         <ul id="listing"></ul>  
  23.     </div>  
  24.       
  25.     <script type="text/template" id="person-template">  
  26.         <span class="list-header"><%= firstname %> <%= lastname %> (<%= type %>)</span>  
  27.         <div class="details">  
  28.             home phone: <%= homephone %><br/>  
  29.             email: <a href="mailto:<%= email %>"><%= email %></a>  
  30.         </div>  
  31.     </script>  
  32.       
  33.     <script src="js/Studentdata.json" type="text/javascript"></script>  
  34.       
  35.     <script src="js/libraries/jquery-1.10.2.min.js" type="text/javascript"></script>  
  36.     <script src="js/libraries/underscore-min.js" type="text/javascript"></script>  
  37.     <script src="js/libraries/backbone-min.js" type="text/javascript"></script>  
  38.   
  39.     <script src="js/routers/router.js" type="text/javascript"></script>  
  40.     <script src="js/models/person-model.js" type="text/javascript"></script>  
  41.     <script src="js/views/person-views.js" type="text/javascript"></script>  
  42.       
  43.     <script src="js/app.js"></script>  
  44. </body>  
  45. </html>  

 

Output:


Summary


In this article we have learned how to create a Students directory applicaiton. Find the attached source code.


Similar Articles