Archive for the ‘Backbone.js’ Category

Getters and Setters for Backbone Model attributes

October 16, 2011

Published: 2011-10-16

The Backbone.js Model class provides get and set methods to read and write Model attributes which is not a concise or natural as object property access. But it’s not difficult to add a class method to generate Model getter/setter properties so that you can do this in CoffeeScript:

person.name = 'Joe Bloggs'
ph = person.phone

instead of this:

person.set {name: 'Joe Bloggs'}
ph = person.get 'name'

(more…)

Routeless Backbone Contacts 2.0

October 2, 2011

Published: 2011-10-03
Updated: 2011-10-25

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.

(more…)

Routeless Backbone Contacts

September 22, 2011

Published: 2011-09-24
Updated: 2011-10-03

You don’t need a URL router to write client-side applications.

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.

  • The source is on Github.

    Note

    This release described in this post is at the 1.0 tag.
  • Uses DOM events exclusively for UI navigation.
  • The contacts data is persisted locally using browser Web Storage.
  • Templates are written using Underscore.js templates (included with Backbone.js).

Note

A second version of this tutorial application [has been posted], it builds on the material covered in this post.

(more…)