• Blog
  • Talks

Abide - observable object properties in Javascript using Ember-style syntax

2013-08-24This post is over 2 years old and may now be out of date

(1 minute read)

I have just released abide - a small library I've been working on for the last few days. Inspired by Ember.JS observables, it provides a mechanism for auto-updating object properties and auto-triggering object methods based on updates made to other properties within the object. The example in the docs illustrates this well:

var Parent = Abide.extend({
    firstName: 'John',
    lastName: 'Smith',

    fullName: (function() {
        return this.firstName + ' ' + this.lastName;
    }).computed('firstName', 'lastName'),

    showWelcomeMessage: (function() {
        console.log('Welcome ' + this.fullName);
    }).observes('fullName')
});

var m = new Parent();

m.showWelcomeMessage();
// console.log 'John Smith'

m.firstName = 'Mark';
// showWelcomeMessage() automatically gets triggered
// console.log 'Mark Smith'

Internally, Object.defineProperty is used to define getters and setters for all specified properties. The setters internally contain logic for notifying dependent properties if the value has changed.

Furthermore, subclasses can be created, and mixins can also be used:

var EventEmitter = {
    event: null
};

// Parent is defined in our earlier example using Abide.extend(...)
var Child = Parent.extend(EventEmitter, {
    firstName: 'Bob',

    showWelcomeMessage: (function() {
        Parent.prototype.showWelcomeMessage.call(this);
    }).observes('event')
});

var m = new Child();

m.showWelcomeMessage();
// console.log 'Bob Smith'

m.firstName = 'Mark';
// showWelcomeMessage() does not automatically get triggered

m.event = 'test';
// showWelcomeMessage() does get automatically triggered
// console.log 'Mark Smith'

It doesn't currently support as wide a feature-set as Ember's observables, e.g. you cannot observe properties within properties or global properties. This was a deliberate decision, in order to make it more lightweight.

More source, tests and API docs available on Github : https://github.com/hiddentao/abide

  • Home
  • Blog
  • Talks
  • Github
  • Linked-in
  • Email
  • RSS
© Ramesh Nair