Backbone Cheat Sheet

Model and View References

In general, when starting with Backbone it is advised to have a 1-1 correlation of models to views. Every Collection should have a “Collection View” which is simply a Backbone View. Taking a quote from the Backbone website you can see there are 3 distinct approaches people take to matching up Models and Views.

References between Models and Views can be handled several ways. Some people like to have direct pointers, where views correspond 1:1 with models (model.view and view.model). Others prefer to have intermediate “controller” objects that orchestrate the creation and organization of views into a hierarchy. Others still prefer the evented approach, and always fire events instead of calling methods directly. All of these styles work well.

View Guidelines

  • Every Backbone Collection should have a Collection View.
  • Collection Views are just regular views that should render no HTML.
  • The Collection View should listen to the add, remove, and reset Collection events.
  • Views handle model events and DOM events to drive their behavior.

Tips

  • In your view’s render() function you should “return this;” to enable chained calls.
  • Provide a defaults object to your Backbone Model to make the model easier to understand.

View Event Options

  • change
  • focusout
  • mousedown
  • mouseover
  • select
  • click
  • hover
  • mouseenter
  • mouseup
  • unload
  • dbclick
  • keydown
  • mouseleave
  • ready
  • focus
  • keypress
  • mousemove
  • resize
  • focusin
  • load
  • mouseout
  • scroll

Collection Events

  • add - a model is added
  • remove - a model is removed
  • reset - reset or fetch is called on collection

Model Events

  • change
  • change:[attribute]
  • destroy
  • sync
  • error
  • all

Model and Collection Functions

  • initialize - if provided it will be called when constructing the model

References