Sunday, June 2, 2013

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.

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. I used two-way binding in WinJS when I worked with ux design company. This way is a more effective and easy for understanding. You only need right define each one way binding.

    ReplyDelete

Note: Only a member of this blog may post a comment.