Backbone.js

Backbone is a lightweight Model-View Javascript framework designed to help organise our websites. Backbone is based on the popular Model-View-Controller pattern.

Backbone focuses most of it’s attention on the Model, View and Collection. These are the three main components that allows us to create apps which separate out our data from our interface by storing data in our Models which are combined together in Collections, which are then bound to Views. Models represent the data within an app and can service one or many Views at any one time. Collections group together Models and can make changes across Models, Views are the visual elements we see on the page. The elements/Views listen for changes to the Model and update accordingly.

Backbone has two dependencies in order to work correctly. jQuery and Underscore.js .The Underscore library is a nice utility belt of helpful methods which complement and enhance Backbone.

Models : A Model represents the interactive data, data-logic and validation functionality within an application. It does not need to know about the Views or Collections, it simply retrieves data from a source and then stores the data as an object.

Events : An Event play an important part within an app. Events can be used to communicate to Views when data has changed in the Model, this gives the view the chance to react to the change and update the template accordingly.

List of all of the built-in events:

• “change” (Model, options) — when a Model’s attributes have changed.
• “add” (Model, Collection) — when a Model is added to a Collection.
• “remove” (Model, Collection) — when a Model is removed from a Collection.
• “reset” (Collection) — when the Collection’s entire contents have been replaced.
• “destroy” (Model, Collection) — when a Model is destroyed.
• “change:[attribute]“ (Model, value, options) — when a specific attribute has been updated.
• “sync” (Model, Collection) — triggers whenever a Model has been successfully synced to the server.
• “error” (Model, Collection) — when a Model validation fails, or a save call fails on the server.
• “route:[name]“ (router) — when one of a router’s routes has matched.
• “all” — this special event fires for any triggered event, passing the event name as the first argument.

[Expecting Your Valuable Comments]

Thank You