WinJS Two-Way Bindings

I learned a really cool trick from one of my team members Jeremy Foster over at codefoster.com to do two-way binding in WinJS.

To do binding, the procedure is two steps. Since WinJS doesn't support two way bindings we need to define each one way binding.

The first from source data to the destination and is done via WinJS.Binding.defaultBind.

The second from the binding target back to the source data (in this case actually just from the input text box to the source model is done from an onchange event wiring.

WinJS.Namespace.define("Binding.Mode", {
                twoway: WinJS.Binding.initializer(function (source, sourceProps, dest, destProps) {
                    WinJS.Binding.defaultBind(source, sourceProps, dest, destProps);
                    dest.onchange = function () {
                        var d = dest[destProps[0]];
                        var s = source[sourceProps[0]];
                        if (s !== d) source[sourceProps[0]] = d;
                    }
                })
            });

<input type="text" data-win-bind="value: name Binding.Mode.twoway" /<

That's it - super easy.