Application Controls - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 56

Listing 3-17. Defining a Callback for the Page

/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.UI.Pages.define("/html/noselection.html", {
ready: function (targetElement) {
document.getElementById("numberCount").innerText
= ViewModel.UserData.getItems().length;
}
});
WinJS.UI.Pages.define("/html/storeDetail.html", {
ready: function (targetElement) {
ViewModel.State.bind("selectedItemIndex", function (newValue) {
document.getElementById('noStoreSelectionContainer').style.display
= (newValue !=-1 ? "none" : "");
document.getElementById('storeSelectionContainer').style.display
= (newValue == -1 ? "none" : "");
if (newValue !=-1) {
var store=ViewModel.UserData.getItems().getAt(newValue).store;
var url="http://"+store.replace(" ", "")+".com";
document.getElementById("storeFrame").src=url;
}
});
}
})
})();
In the ready callback for this page, I bind to the selectedItemIndex property. When the
user selects an item, I use the iframe to display the home page of the relevant store. Changing
the value of the style.display property lets me switch between the placeholder element and
the detail for the current store.

■ My technique to creating a URL from a store name is pretty basic. I just remove any
spaces and add .com to the end of the name. This won't suffice for a real project, but it will do
just fine for my simple example.

Tip

Showing the Page
You must avoid using ready callbacks to set up bindings for pages that are not always displayed,
because the JavaScript code will be executed each time the page is loaded. Over time, you
end up with a series of bindings, all of which perform the same task. WinJS doesn't provide a
mechanism for cleaning up when the content of a page is removed from the layout, so the best
approach is to move bindings into the main JavaScript files for the application.

1