Backbone JS (Stop tying your data to DOM)

Backbone.js is not a full fledged MVC or MVP or MVVM framework. Basically, it provides the event bindings between the model and view, so that changes in the view will update the attributes of model and corresponding views listening to the model will get updated.

But there are many backbone js plugins which are helpful to implement MVC, MVP , MVVM in the client side application based on the requirement.

UI Development without Backbone JS:

As shown in the above diagram the data is tied to DOM, and it becomes an overhead when the data is queried from DOM for each rendering of the view esp if the data is shown in multiple views.

UI Development with Backbone JS:

Since with backbone data is stored in Model, each view can be updated by the changes in the data associated to model.

Backbone provides various components like Model, View, Collection and Router to organize the client side application development. Lets look at each of the component in detail.

 Backbone Model  (State)

 Backbone model maintains the state of the application. Following are possible with the Model.

Responsibilities:

 1) Getting the data from server
 2) Save data to the server
 3) Validation of data
 4) Syncing of the data from server to client
 5) Destroying the model (data, if no longer needed )

Usage:

 A model has attributes to store the data. On change of any of the attribute value, a change event will be triggered by the model.
However, this change event can also be suppressed by passing {silent:true}. Views should listen to these events and display the data.

Gotchas:

 1)If the attribute is again a model, then the change in the attribute of the submodel will not be triggered in parent model. Use the deep  Model binder plugin.(https://github.com/powmedia/backbone-deep-model)
 2)Even while instantiating a model with an object, the attributes will be set and the validations if existing on any attribute will trigger.
 3)Be careful in specifying the initial values. If initial value is not set, then the value is treated as undefined.

Backbone Collection :

 A collection is just a list of models.

Responsibilities:

 1)Fetch data from server
 2)Sync data to the server

Usage:

 On addition or removal of model to a collection the change event will be triggered. Views should listen to these events and display the data.

Gotchas:

 1)While creating the collection from a model, if the validate method fails then the model will not get added into the collection

Backbone View :

 A view is basically UI component that displays the data to the user intuitively. It interacts with the template for markup.

Responsibilities:

 1)listen to the model and display data when data is changed.

Gotchas:

 1)Beware of zombie views, views should be destroyed and all their events should be undelegated otherwise they will become zombies.

Backbone Router:

 A router allows us to configure url corresponding to the view. It should be used only to provide views as a bookmark-able url.  Don’t use it as a controller.

Responsibilities:

 1)It provides route and callback methods corresponding to the creation of view

Usage:

 Use router.navigate or Backbone.history.navigate to route to a different url. Pass {trigger:true} to trigger the callback method corresponding to the view

Gotchas:

 1)By default, callback corresponding to the empty route will be called.
 2)This is not a controller and never should be used as a controller. It should not be passed to the views. Use   Backbone.history.navigate() method for such cases.