Post
Ask Question

Demonstrating Backbone.js: Namespacing in Backbone.js

Introduction

Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use collections in 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 Namespaces.
 
Namespaces helps us to structure our application in a much nicer way and to keep the application with limited global variables.
 
See the inline comments for a better understanding.
  1. (function () {   // entire block is wrapped into an anonymous jQuery function..  
  2.   
  3.     window.App = {  // defining app name space; we can rename it as per our project name.
  4.         Models: {},  
  5.         Collections: {},  
  6.         Views: {}  
  7.     };  
  8.   
  9.     window.template = function (id) {  
  10.         return _.template($('#' + id).html());  
  11.     };  
  12.   
  13.   
  14.     // Person Model  
  15.     App.Models.Person = Backbone.Model.extend({  // This is Person model referencing the App namespace model.  
  16.         defaults: {  
  17.             name: 'Guest User',  
  18.             age: 30,  
  19.             occupation: 'worker'  
  20.         }  
  21.     });  
  22.   
  23.     // A List of People  
  24.     // Now here the People is referencing collection from App namespace  
  25.     App.Collections.People = Backbone.Collection.extend({  
  26.         model: App.Models.Person  
  27.     });  
  28.   
  29.   
  30.     // View for all people  
  31.     /// Now here People is referencing views from App namespace  
  32.     App.Views.People = Backbone.View.extend({  
  33.         tagName: 'ul',  
  34.   
  35.         render: function () {  
  36.             this.collection.each(function (person) { // Change Person Reference from App Views namespace  
  37.                 var personView = new App.Views.Person({ model: person });  
  38.                 this.$el.append(personView.render().el);  
  39.             }, this);  
  40.   
  41.             return this;  
  42.         }  
  43.     });  
  44.   
  45.     // The View for a Person  
  46.     // Change Person Reference from App Views namespace  
  47.     App.Views.Person = Backbone.View.extend({  
  48.         tagName: 'li',  
  49.   
  50.         template: template('personTemplate'),  
  51.         render: function () {  
  52.             this.$el.html(this.template(this.model.toJSON()));  
  53.             return this;  
  54.         }  
  55.     });  
  56.   
  57.     // Change Person Reference from App Collections namespace  
  58.     var peopleCollection = new App.Collections.People([  
  59.             {  
  60.                 name: 'Mahesh Chand',  
  61.                 age: 26  
  62.             },  
  63.             {  
  64.                 name: 'Praveen',  
  65.                 age: 25,  
  66.                 occupation: 'Dotnet Developer'  
  67.             },  
  68.             {  
  69.                 name: 'Sam Hobbs',  
  70.                 age: 26,  
  71.                 occupation: 'Java Developer'  
  72.             }  
  73.     ]);  
  74.   
  75.     // Change Person Views from App Views namespace  
  76.     var peopleView = new App.Views.People({ collection: peopleCollection });  
  77.     $(document.body).append(peopleView.render().el);  
  78. })();  
 Summary

In this article, I explained how to use namespaces in Backbone.js. In a future articles we will understand more about Backbone.js with examples.


Similar Articles