Difference/best practices between WinJS.Binding.as and mixin's

Question

Hi!

I am trying to understand the details of bindings in JavaScript with WinJS. One thing that is not really clear to me is when to use WinJS.Binding.as and when to go for a mixin. To demonstrate my problem I have written a very simple demo app that does binding with both ways.

On the one hand I have written a simple class that does not make use of a mixin:

(function () {
    "use strict";

    var simpleClass = WinJS.Class.define(
        function () {
        },
        {
            simpleString: "Hello World!"
        });

    WinJS.Namespace.define("BindingExample", {
        simpleClass: simpleClass
    });
})();

On the other hand I created a class that uses mixin:

(function () {
    "use strict";

    var simpleMixin = WinJS.Class.define(
        function () {
            this._initObservable({ simpleString: "Hello World!" });
        },
        {
            simpleString: {
                set: function (value) { this.setProperty("simpleString", value); },
                get: function () { return this.getProperty("simpleString"); }
            }
        });

    WinJS.Namespace.define("BindingExample", {
        simpleMixin: WinJS.Class.mix(
            simpleMixin,
            WinJS.Binding.mixin,
            WinJS.Binding.expandProperties(simpleMixin))
    });
})();

Now I use both options in a very simple control (note that I use WinJS.Binding.as to enable change notification for simpleClass):

(function () {
    "use strict";

    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    function ready(element, options) {
        document.getElementById("changeTextButton").onclick = function () {
            simpleClassObject.simpleString = simpleClassObject.simpleString + " 1";
            simpleMixinObject.simpleString = simpleMixinObject.simpleString + " 2";
        };
        WinJS.Binding.processAll(document.getElementById("bindingWithAs"), simpleClassObject);

        simpleMixinObject.bind("simpleString", function onNameChange(newValue) {
            document.getElementById("mixinTarget").innerText = newValue;
        });
    }

    var simpleClassObject = WinJS.Binding.as(new BindingExample.simpleClass());
    var simpleMixinObject = new BindingExample.simpleMixin();

    WinJS.UI.Pages.define("/html/homePage.html", {
        ready: ready
    });
})();

Both options work fine. My question is whether there are best practices when to use what. Any perf drawbacks of one or the other?

Kind regards,
Rainer

---

Rainer

Answer 1

Hi Rainer,

If you were to look at the WinJS code, you would see that WinJS.Binding.as actually does something very similar to when you add the mixin in yourself. It creates an "ObservableProxy" object to wrap your object and applies the mixin for you.

I don't have hard perf numbers for you, but I think the general guidance would be call WinJS.Class.mix if you are defining a class for your data. On the other hand, if you are getting back arbitrary JS objects without a common prototype (perhaps from a JSON REST API) then you can use WinJS.Binding.as() to give you bindable objects for your data objects.

In both cases, you are committing to the extant properties being the only properties the binding system will get notifications on unless you tell the observable object explicitly that you are adding another property to do change notifications on.

Cheers,
-Jeff