Routeless Backbone Contacts 2.0

Oct 3, 2011 Backbone.jscoffeescript

This post describes a revamped version 2.0 of my original Routeless Backbone Contacts application. The material covered here builds on the original post.

  1. The basic application functionality and the underlying data remains the same.
  2. The new user interface is a single two-pane page with a selectable list of contacts on the left and contact details on the right.
  3. A Search box has been added to incrementally filter the list of displayed contacts.
  4. The application is 100% event driven – there is no direct coupling between the views. Backbone.js events emitted by the underlying contact data collection ensure the views are updated automatically when the state of the underlying data changes.

Routeless Backbone.js Contacts is a totally client-side CRUD tutorial application written using CoffeeScript, Stylus, Backbone.js and jQuery which are a perfect match for writing concise, readable well structured web applications.

User Interface

contacts2-screenshot.png

The single page user interface combines four Backbone.js views. The views subscribe to, and are updated by, events emitted by the contacts collection (add, remove, change, reset, filter, select).

Models and Collections

ContactModel

The same model as version 1.0.

ContactsCollection

The ContactsCollection collection has been enhanced:

  1. The Filter class provides functions to filter the collection by contact name. When the filter criteria changes the collection broadcasts a custom filter event to subscribed views.
  2. The Cursor class provides a cursor object which represents the currently selected model in the contacts collection. The cursor listens for changes to the collection so that it can automatically ensure the cursor points to a valid contact in the filtered collection. When the cursor changes the contacts collection broadcasts a custom select event to subscribed views.

Views

RibbonView

contacts2-ribbon.png

StatusView

contacts2-status.png

ListView

contacts2-list.png

DetailView

contacts2-detail.png

Browser Compatibility

The markup generated by this tutorial is HTML5 with CSS3, no attempt has been made to accommodate legacy browsers.

Backbone.js Tips

On the other hand, it’s not unusual for event handlers to execute common code which can also result in execution redundancy (for example, the renderCursor handler is also called by the render handler in the ListView). In cases like this don’t sweat over eliminating the redundancy unless it impacts performance – code clarity is usually preferable to the convoluted and brittle optimisations generated by a “fix”.

If you assumed that the set handler would be called with no arguments you would expect model to be set to _null_ – in fact model is assigned _@collection. The code can be fixed by introducing an anonymous proxy handler that is bound to this and called without any arguments:

@_collection.bind 'reset', => @set()
set: (model=null) ->
    :
« Previous Next »