Backbonejs

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs