\nIf you already have BackeboneJS set up in your system, you may jump directly to the Understanding BackboneJS<\/strong><\/a> below.<\/div>\n
[ulp id=’qGGDqWnle19VavkM’]<\/p>\n
Setting up Working Environment for Backbone.js<\/h2>\n
BackboneJS has a hard dependency on Underscore.js and a soft dependency on Jquery. So, the following components are required to start working with BackboneJS:<\/p>\n
- \n
- Backbone.js<\/a><\/li>\n
- Underscore.js<\/a>\u00a0(>=1.4.3)<\/li>\n
- Jquery<\/a>\u00a0(>=1.7.0)<\/li>\n<\/ol>\n
So, after having all these prerequisites we will test if it has been set up properly by writing our first\u00a0BackboneJSDemo.html file such as below:<\/p>\n
\r\n<html>\r\n<head>\r\n <meta charset="utf-8">\r\n <title>BackboneJS Tutorial<\/title>\r\n <\/head>\r\n<body>\r\n<script src="underscore.js"><\/script>\r\n <script src="jquery.js"><\/script>\r\n <script src="backbone.js"><\/script>\r\n<body>\r\n<html>\r\n<\/pre>\n
The picture below shows the necessary files downloaded in order to start working.<\/p>\n
![\"Backbone.js](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/Resized-LTSSA.jpg\")
<\/a>Backbone.js Essential Files<\/figcaption><\/figure>\n <\/span>You can simply run the above\u00a0HTML file on browser to see that JS files have been loaded successfully or not.<\/p>\n
Understanding BackboneJS<\/h2>\n
Like many other libraries, Backbone is also one of the most prominent JavaScript libraries. It provides proper structuring to web applications with its most robust components. BackboneJS is gaining special attention\u00a0due to the following attributes:<\/p>\n
- \n
- It is simple and easy to use<\/li>\n
- It is a light weight framework<\/li>\n
- It is of object oriented Nature<\/li>\n
- It provides structure to JavaScript that makes it easy to understand<\/li>\n<\/ul>\n
Major Components of BackboneJS:<\/h2>\n
BackboneJS consists of different components that we will be discussing in detail below. The major components of BackboneJS are:<\/p>\n
- \n
- Views<\/li>\n
- Events<\/li>\n
- Models<\/li>\n
- Collections<\/li>\n
- Routers<\/li>\n<\/ol>\n
BackboneJS Views:<\/h2>\n
BackboneJS Views are used to reflect how our application model data will look like. They are also used to listen for different types on events based upon JavaScript selectors and act accordingly based upon the type of event fired. The sample code below describes how we can use views to render application’s model data:<\/p>\n
\r\nvar BackbonejsView= Backbone.View.extend({\r\n\r\nel: $('body'), \/\/ attaches `this.el` to an existing element.\r\n\r\n\/\/The initialize function is always called when instantiating a Backbone View.\r\n initialize: function(){\r\n _.bindAll(this, 'render'); \/\/ every function that uses 'this' as the current object should be in here\r\n this.render();\r\n },\r\n\r\nrender: function(){\r\n $(this.el).append("<ul> <li>Welcome to backboneJS JavaScript Library<\/li> <\/ul>");\r\n }\r\n\r\n });\r\n\r\n\/\/Instantiating Application View\r\nvar listView = new BackbonejsView();\r\n<\/pre>\nSo, the above example\u00a0simply shows that how the BackboneJS Views are used. For more details regarding BackboneJS Views please refer: BackboneJS Views in Detail<\/a><\/p>\n
BackboneJS Models:<\/h2>\n
Models are the heart of any JavaScript application. BackboneJS Model is basically a Java Script object, i.e. key-value pairs\u00a0used to represent our application data which can be created, validated with respect to specified constraints, saved to the server and destroyed. Models provide basic set of functionality\u00a0to handle event triggering, persistence, etc.\u00a0The following example elaborates on how we can use models in our application:<\/p>\n
\r\nvar Employee\u00a0= Backbone.Model.extend({\r\ndefaults: {\r\nname: 'bilal',\r\naddress: 'Pakistan'\r\n }\r\n });\r\n<\/pre>\nFor more Details regarding BackboneJS Model please refer: <\/span>BackboneJS Model in Detail<\/a><\/p>\n
BackboneJS Collections:<\/h2>\n
BackboneJS Collections can be simply defined as a container which maintains the list of BackboneJS Models in an organized way.<\/p>\n
\r\nvar EmployeesList = Backbone.Collection.extend({\r\n\/\/Specifying the model class that the collection contains. Employee model has already been created in BackboneJS Model Section.\r\nmodel: Employee\r\n });\r\n\/\/Initializing Collection\r\nthis.collection = new ExployeesList();\r\n\/\/Adding Object in Collection\r\nthis.collection.add(employee);\r\n\/\/Iterating Whole Collections\r\n _(this.collection.models).each(function(employee){\r\n \/\/Processing fetched object from collection\r\n }, this);\r\n<\/pre>\nFor more details regarding BackboneJS Collections please refer:\u00a0BackboneJS Collections in Details<\/a><\/p>\n
BackboneJS Routers:<\/h2>\n
Not heard about word routers before? Well, Routers were previously called controllers, before they got a change of name in BackboneJS version 0.5. So, Routers are basically a mechanism to route client side pages and connect them to events and actions through URLs. So if you want to make reference to certain state or location of a web application you need it.\u00a0Consider the following example to understand how we can use them:<\/p>\n
\r\nvar Workspace = Backbone.Router.extend({\r\n routes: {\r\n "help": "help", \/\/ #help\r\n "search\/:query": "search", \/\/ #search\/kiwis\r\n "search\/:query\/p:page": "search" \/\/ #search\/kiwis\/p7\r\n },\r\n help: function() {\r\n ...\r\n },\r\n search: function(query, page) {\r\n ...\r\n }\r\n});\r\n<\/pre>\nFor more details regarding BackboneJS Routers please refer: BackboneJS Routers in Detail<\/a><\/p>\n
BackboneJS Events:<\/h2>\n
Events are one of the strong component of BackboneJS. Events are used to create a relationship between your application and browser features. Furthermore, It gives the ability to perform some action on happening something to object.<\/p>\n
We will be understanding Events by discussing its usages in different scenarios with examples.<\/p>\n
BackboneJS DOM Events<\/h3>\n
All jQuery Events are valid for BackboneJS to bind. To use BackboneJS Events you need to define an attribute named “events” into your views with the following syntax:<\/p>\n
“event css-selector”<\/span> :<\/span> “function”<\/span><\/span><\/span><\/p>\n
Where event is the kind of Event that you want to handle\/listen, then you need to add a blank space and use a css selector (as you do with jQuery), but remember that the scope of the bind will include only those elements that belongs to your View. function is a name of a method of your view, and must be passed as string.<\/p>\n
Let’s Consider an example to understand this thoroughly:<\/p>\n
\r\n\r\nvar EmployeeView= Backbone.View.extend({\r\n\r\nel: $('body'), \/\/ el attaches to existing element\r\n\r\n\/\/So, Here we are binding events on adding each employee. Whenever DOM object with id 'addEmployee' will be clicked a new employee record will be added and 'emplyeeAdded method will be called.\r\n\r\nevents: {\r\n\r\nclick #addEmployee: 'employeeAdded'\r\n},\r\n\r\ninitialize: function(){\r\n _.bindAll(this, 'render', 'empoyeeAdded');\r\n\r\nthis.counter = 0; \/\/ total number of employee\u00a0added\u00a0so far\r\n this.render();\r\n },\r\n\r\n\/\/render() now introduces a button to add a new employee on which we have binded an event above\r\n\r\nrender: function(){\r\n $(this.el).append("<button id='addEmployee'>Add list item<\/button>");\r\n $(this.el).append("<ul><\/ul>");\r\n },\r\n\r\n\/\/Function that will be called each time a new employee will be added\r\nempoyeeAdded: function(){\r\n this.counter++;\r\n $('ul', this.el).append("<li>Employee Added with id: "+this.counter+"<\/li>");\r\n },\r\n\r\n});\r\n\r\nvar employeeView= new EmployeeView();\r\n\r\n<\/pre>\nHere you can have\u00a0All Possible Events Categories<\/a>\u00a0for detailed understanding of Events Usages.<\/p>\n
We can also bind events on objects level as well, such as:<\/p>\n
\r\n\r\nevents: {\r\n'click' : 'confirmation'\r\n }\r\n\r\nconfirmation: function(){\r\n alert("Employee Added Successfully...!!!");\r\n }\r\n\r\n<\/pre>\nSo, whenever any object is clicked, this call back method will be called.<\/p>\n
Model Binding Events<\/h3>\n
Usually a view tracks a model, and when the data in the model changes the view is updated to represent the changes.\u00a0But our views did not track models and were not updated when the model changed. So, we will have to track changes to the models so that we may change our models too accordingly. Hence here the role of bindings events to our models comes into play. So, we will be attaching events with change of our models which will invoke methods to change our view as well accordingly.<\/p>\n
Let’s consider an example about how can we bind events to model and change the views accordingly whenever there is any change in the model:<\/p>\n
\r\n\r\n\/\/Here we have Employee Model\r\nvar Employee\u00a0= Backbone.Model.extend({\r\n defaults: {\r\nname: 'BAY',\r\ngender: 'male'\r\n }\r\n });\r\n\r\n\/\/Collection of Employees\r\nvar EmployeeList = Backbone.Collection.extend({\r\n model:\u00a0Employee\r\n });\r\n\r\n\/\/In our initialize method we will bind events to change in models\r\ninitialize: function(){\r\n\r\n _.bindAll(this, 'render', 'unrender'); \/\/ every function that uses 'this' as the current object should be in here\r\n\r\n\/\/Binding for events whenever any model object will be changed, to change view also\r\nthis.model.bind('change', this.render);\r\n\r\n\/\/Binding for events whenever any model object will be removed, to change view also\r\n this.model.bind('remove', this.unrender);\r\n }\r\n\r\n\/\/This method will update the view when model object will \u00a0be removed\r\n unrender: function(){\r\n $(this.el).remove();\r\n }\r\n\r\n\/\/To update the view when model object will be changed to show the updated values\r\n render: function(){\r\n\r\n $(this.el).html('<span style="color:black;">'+this.model.get('name')+' '+this.model.get('gender')+'<\/span>');\r\n return this; \/\/ for chainable calls, like .render().el\r\n },\r\n\r\n<\/pre>\nFor more details regarding BackboneJS Events\u00a0please refer to: BackboneJS Events\u00a0in Detail<\/a><\/p>\n
Download the Sample Application Source Code<\/h2>\n
In this article we created some sample applications starting from a very basic one, covering all the BackboneJS components.<\/p>\n
- Underscore.js<\/a>\u00a0(>=1.4.3)<\/li>\n