Backbone.js Basics April 3rd, 2013

Overview

  • Views observe Models
  • The traditional controller role is performed by the template, not by the Backbone View
  • Model persistence is the storage and synchronization of data
  • A group of Models is a Collection
  • A Model or Collection may have multiple Views observing it for changes
  • Collections are useful for performing any aggregate computations across more than one model
  • Underscore.js is a JavaScript templating engine used by render() for the Model
  • Add render() callback as a Model subscriber, so the View can be triggered to update when the Model changes

Templating

JavaScript templating libraries (such as Underscore, Mustache, or Handlebars.js) are often used to define templates for Views as HTML markup containing template variables. These template blocks can either be stored externally or within script tags with a custom type (e.g text/template). Variables are delimited using a variable syntax (e.g <%= title %> for Underscore and {{title}} for Handlebars).

Routers

In classical web development, navigating between independent views required the use of a page refresh. In single-page JavaScript applications, however, once data is fetched from a server via Ajax, it can be dynamically rendered in a new view within the same page. Since this doesn’t automatically update the URL, the role of navigation thus falls to a router, which assists in managing application state (e.g., allowing users to bookmark a particular view they have navigated to). Routers are neither a part of MVC nor present in every MVC-like framework.

Controllers

Backbone’s Views typically contain Controller logic, and Routers are used to help manage application state, but neither are true Controllers according to classical MVC.

Fast Facts

  • Core components: Model, View, Collection, Router. Enforces its own flavor of MV*
  • Event-driven communication between Views and Models. It’s relatively straight-forward to add event listeners to any attribute in a Model, giving developers fine-grained control over what changes in the View
  • Supports data bindings through manual events or a separate Key-value observing (KVO) library
  • Support for RESTful interfaces out of the box, so Models can be easily tied to a backend
  • Extensive eventing system. It’s trivial to add support for pub/sub in Backbone
  • Prototypes are instantiated with the new keyword, which some developers prefer
  • Agnostic about templating frameworks, however Underscore’s micro-templating is available by default
  • Clear and flexible conventions for structuring applications; Backbone doesn’t force usage of all of its components and can work with only those needed

Nuggets

  • myModel.toJSON() method returns a copy of the model’s attributes as an object
  • JSON.stringify(myModel) returns the model’s attributes as a string
  • Model.get(‘attribute’) … Model.set(‘attribute’, ‘value'[, repeat]) … Model.unset(‘attribute’)
  • You can bypass triggers bound to a model’s change events by using the model’s .attributes attribute {silent: true}
  • Bind change event listeners for models in the initialize() function with myModel.on(‘change’, CALLBACK) or listen for changes to specific attributes with myModel.on(‘change:ATTRIBUTE’, CALLBACK)
  • You can also validate models with something like myModel.validate = function(attrs){if(!attrs.name){return ‘Name Required’;}};
  • A view’s render() method can be bound to a model’s change() event, enabling the view to instantly reflect model changes
  • el: ‘CSS-SELECTOR’
  • You can think of models as individual items in a To Do list, and a collection is the list of items