Creating an Observable Object in Windows 8 JavaScript

Living in the JavaScript world for a while will help you to appreciate the offerings of C# for sure. Many concepts like classes, inheritance, observable collections, list extensions (LINQ) are simply absent and so a creative alternative has been created either in WinJS or just in recommended practice.

One of these is in the area of data binding.

First of all, I recommend Stephen Walther’s excellent article on Metro: Declarative Data Binding. He’s much more thorough than I intend to be here. I only want to relay my experience with following the instructions on dev.windows.com – specifically the article entitled How to bind a complex object, and following the sample project entitled Programmatic binding sample. If you want to learn a lot more about Windows 8 development using HTML and JavaScript, you can check out Stephen’s book Windows 8.1 Apps with HTML5 and JavaScript.

Here are the steps I took to get a very simple object to bind well.

• Write a simple class
• Add an _initObservable method
• Mix it
• Instantiate it
• Bind the properties
• Change a property to test

That’s it. I’ll elaborate a bit on each point.

Write a simple class

Here’s the rocket science class I wrote. It has a single property – name.

var Widget = WinJS.Class.define(
    function (name) {
        this.name = name;
    }
);

Add an _initObservable method

var Widget = WinJS.Class.define(
    function (name) {
        this._initObservable();
        this.name = name;
    }
);

This is necessary so that “the observablility implementation is completed properly”.

Mix it

WinJS.Class.mix(Widget,
    WinJS.Binding.mixin,
    WinJS.Binding.expandProperties(Widget)
);

This adds the necessary bindability to your custom class. If you only want a select few of your properties, you can specify a subset of properties in the parameter for the expandProperties method call. See the Programmatic binding sample to see what I mean.

Instantiate it

Now you’re ready to instantiate your object.

var widget = new Widget("Widget1");

Bind the properties

What you’re doing in the binding is specifying a function that you want to run whenever a property is changed.

widget.bind("name", function (newValue, oldValue) {
    var foo = document.querySelector("#foo");
    foo.innerText = newValue;
});

Change a property to test

Now, somewhere in your code, change value of that property like this…

widget.setProperty("name", "Hi, Mom!");

And there you have it. The simplest possible example I could come up with for data binding a complex object by turning it into the JavaScript version of an observable object.

Happy binding!