Getters and Setters for Backbone Model attributes

Sun Oct 16, 2011

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'

The CoffeeScript example below shows how it’s done using the ECMAScript 5 Object.defineProperty function to define a Model attribute method. I’ve added the attribute class method to a BaseModel class which is inherited by application classes. To create a Model attribute property call the attribute method and pass it the name of the property.

Backbone = require 'backbone'

class BaseModel extends Backbone.Model
    # Create model attribute getter/setter property.
    @attribute = (attr) ->
        Object.defineProperty @prototype, attr,
            get: -> @get attr
            set: (value) ->
                attrs = {}
                attrs[attr] = value
                @set attrs

class Contact extends BaseModel
    @attribute 'name'
    @attribute 'phone'

p = new Contact()
p.name = 'Joe Bloggs'
p.phone = '1234'
console.log p.attributes    # { name: 'Joe Bloggs', phone: '1234' }

Being able to create custom getter/setter properties is a testament to the little known power of JavaScript.

References



  « Previous: Next: »