Working With Aurelia @observable

Even if you are new to Aurelia, you are probably familiar with the @bindable functionality which allows you to add bindable attributes primarily to your custom elements and custom attributes.

There is a lesser known feature in Aurelia in the form of @observable which allows you to use the underlying observation layer in Aurelia to observe variables for changes and react accordingly in a similar way you react to changes on @bindable attributes.

@observable In Action

import { observable } from 'aurelia-framework';

export class MyViewModel {
    @observable myVariable;

    attached() {
        setTimeout(() => {
            this.myVariable = 'I am a value, hooray!';
        }, 5000);
    }

    myVariableChanged(newValue, oldValue) {
        console.log(newValue, oldValue);
    }
}

Once the view-model attaches itself to the page, it’ll wait 5 seconds and then change the value. This will then trigger the changed callback defined on the view-model.

The naming convention is <variableName>Changed with two parameters on the changed callback, the new value and the old value.

The variableChanged part is a convention. Aurelia takes for supplied class value and appends Changed to the end. If you do not like this kind of magic, you can explicitly configure the observable decorator to define the callback.

import { observable } from 'aurelia-framework';

export class MyViewModel {
    @observable({changeHandler: 'myVariableChanged'}) myVariable;

    attached() {
        setTimeout(() => {
            this.myVariable = 'I am a value, hooray!';
        }, 5000);
    }

    myVariableChanged(newValue, oldValue) {
        console.log(newValue, oldValue);
    }
}

This does the exact same thing as the previous example, we are just being more explicit. This allows you to also change the change callback function. If you wanted your change handler to be called ‘myExplicitChangeHandler` then you’d do this:

@observable({changeHandler: 'myExplicitChangeHandler'}) myVariable;

myExplicitChangeHandler(newValue, oldValue) {
    console.log(newValue, oldValue);
}

The beautiful thing about the @observable decorator is behind the scenes all it does is create a setter and getter on your property but also declares any dependencies your property has which is the equivalent of @computedFrom which prevents dirty-checking.

There are other ways you can observe changes on custom objects and arrays, one such alternative is using the BindingEngine and observation methods, specifically propertyObserver if you want to observe changes on objects.