|This is a user sandbox of Tlaport4. A user sandbox is a subpage of the user's user page. It serves as a testing spot and page development space for the user and is not an encyclopedia article.|
|Initial release||October 13, 2010|
1.2.3 / September 3, 2015
|Size||7.3 KB production|
69 KB development
Models and Views
The main use of Backbone.js is to help with separating the business logic away from the user interface. Backbone does this by utilizing models and views.
A model contains and manages the interactive data; it is also responsible for controlling the loads and saves from the server. A model can also deal with the logic involved with the data, such as handling conversions, validations, computed properties, and access control. Models should be designed as reusable objects that contain all the functions needed to manipulate their set of data. They should be able to be passed around the application to be used wherever the data they contain is required.
A view is a piece of the user interface. Views can render the data from a particular model, or from a number of different models. Views can also be stand alone chucks of the user interface that do not interact with any model. Views handle interactivity and captures the user input. It sends the input to the corresponding model to handle the necessary logic associated with the input.
When the data in a model is modified, it will trigger a "change" event. When these events are triggered, the views react or re-render themselves as necessary. Ideally, the models should not be aware of the views they are interacting with. Instead, the models just trigger the events and the views are responsible for listening for these events and reacting accordingly.
Collections are used to deal with a group of related models. They can handle the loading and saving of new models to the server. A collection can provide functions that help with the aggregation or calculations across multiple models. Collections are also capable of proxying all the events that are triggered from the models within it. This allows the views to be able to listen for the events from one location, rather than listening for events from each model within the collection.
Backbone routers are used to provide linkable, bookmarkable, shareable URLs for significant locations in the application.
A list of the built-in Backbone events, with their arguments:
- "add" (model, collection, options) — when a model is added to a collection.
- "remove" (model, collection, options) — when a model is removed from a collection.
- "update" (collection, options) — single event triggered after any number of models have been added or removed from a collection.
- "reset" (collection, options) — when the collection's entire contents have been replaced.
- "sort" (collection, options) — when the collection has been re-sorted.
- "change" (model, options) — when a model's attributes have changed.
- "change:[attribute]" (model, value, options) — when a specific attribute has been updated.
- "destroy" (model, collection, options) — when a model is destroyed.
- "request" (model_or_collection, xhr, options) — when a model or collection has started a request to the server.
- "sync" (model_or_collection, resp, options) — when a model or collection has been successfully synced with the server.
- "error" (model_or_collection, resp, options) — when a model's or collection's request to the server has failed.
- "invalid" (model, error, options) — when a model's validation fails on the client.
- "route:[name]" (params) — Fired by the router when a specific route is matched.
- "route" (route, params) — Fired by the router when any route has been matched.
- "route" (router, route, params) — Fired by history when any route has been matched.
- "all" — this special event fires for any triggered event, passing the event name as the first argument.
- Underscore.js - Backbone's only hard dependency. For Backbone to work, you must include the Underscore library or an alternative that replaces Underscore's functionality.
- jQuery - suggested for easier DOM manipulation and Ajax
- JSON2.js - required if you want to parse and serialize JSON in older browsers, such as Internet Explorer versions 6 and 7
- Lo-Dash - alternative to Underscore.js that has custom builds and additional features.
- Zepto - jQuery alternative for mobile apps
Backbone Debugger is a Chrome Developer Tools extension to debug Backbone.js applications. Displays the application’s views, models, collections, and routers in real-time.
Backbone Eye is a Firebug extension for debugging Backbone.js applications.
Backbone.js was developed by Jeremy Ashkenas and the initial Backbone release was on October 13, 2010.
As of September 03, 2015, release 1.2.3 is the current stable version.
Legacy Browser Support
Backbone.js is capable of supporting Internet Explorer versions 6 and 7 with the use of JSON2.js to handle parsing and serializing JSON.
This section needs additional citations for verification. (November 2013)
The following web applications are built with Backbone.js:
- Airbnb 
- Diaspora 
- Digg 
- DocumentCloud 
- Foursquare 
- Grooveshark 
- Groupon Now 
- Hulu 
- LinkedIn Mobile
- NewsBlur 
- Openbravo Mobile (with Enyo).
- Pandora Radio 
- Sony Entertainment Network
- Soundcloud 
- Strideapp 
- The Climate Corporation
- Trello 
- USA Today.com 
- WordPress.com 
- xTuple (with Enyo).
- ^ Change Log
- ^ Dependencies, BackboneJS, October 14, 2015
- ^ "What SendHub Learned Building a Single-Page Backbone.js App", ReadWriteWeb
- ^ "Behind the rumours: how we built our Twitter riots interactive", The Guardian, London, 8 December 2011
- ^ Companies and Websites using Backbone.js
- ^ a b c d e f g h i j k l m Example Sites Which Use Backbone.js
- ^ http://www.fastcolabs.com/3014663/open-company/inside-the-tech-stack-digg-used-to-replace-google-reader
- ^ "Mobile UI Components". Retrieved 2014-03-22.
- ^ "A Shorter Letter". Retrieved 2014-03-22.
- Osmani, Addy (March 22, 2013). Developing Backbone.js Applications (1st ed.). O'Reilly Media. p. 150. ISBN 978-1449328252.