Simple data binding example

April 30, 2012 at 10:06 am | Posted in HTML/JavaScript, Metro, Windows 8 | Leave a comment

{Code updated to reflect changes in Release Preview.}

I was trying add a simple piece of markup that had text elements bound to an object, but just could not get it to work the way I wanted, i.e. declare a binding source in the markup. By looking at the samples, I could use WinJS.BindingAll(element, object), but for some reason failed with data-win-bindsource in the markup. Finally, I did a Google search on “data-win-bindsource” and ran across a post in November 2011 that was exactly what I was trying to do. It turns out that the answer provider was me!

So for the sake of others who are trying to do the same thing and for pounding this nugget into my own brain, here is the example:


<body>
    <div class="fixed-layout">
        <div data-win-bindsource="mySpace.data">
            <div data-win-bind="innerText: x"></div>
        </div>
        <button id="myButton">
            Click</button>
    </div>
</body>


(function () {
    "use strict";
    var person = {
        name: "Tom",
        city: "Boston"
    }

    var labelSource = WinJS.Binding.as(person);
   
    WinJS.strictProcessing();

    WinJS.Utilities.ready(function(){
        WinJS.UI.processAll().then(function () {
            var elem = document.querySelector("#complexLabel");
            WinJS.Binding.processAll(elem, labelSource);
        });

        var lab = document.getElementById("complexLabel");
        document.getElementById("action").addEventListener("click", changeLabel, false);

    });
   
    function changeLabel() {
        labelSource.name = "John";
        labelSource.city = "New York";
    }

    //Make names public with namespace so that HTML file can see them
    WinJS.Namespace.define('test', {
        labelSource: labelSource
    });
})();
Advertisements

Leave a Comment »

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: