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

Listing 3-15. Switching Between Two Pages in Response to a View Model Update

…
function performInitialSetup(e) {
WinJS.UI.processAll().then(function () {
UI.List.displayListItems();
UI.List.setupListEvents();
UI.AppBar.setupButtons();
UI.Flyouts.setupAddItemFlyout();
ViewModel.State.bind("selectedItemIndex", function (newValue) {
var targetElement=document.getElementById("itemDetailTarget");
WinJS.Utilities.empty(targetElement)
var url=newValue == -1 ? "/html/noSelection.html" :
"/pages/itemDetail/itemDetail.html"
WinJS.UI.Pages.render(url, targetElement);
});
});
}
…

I respond to changes in the selectedItemIndex property by altering the value of the URL
argument I pass to the WinJS.UI.Pages.render method. Each time a page is displayed, the rel-
evant callback function is executed, and my content is updated and presented to the user.

■ Note that when you use the bind method, your callback function will be executed with
the current value of the property you are monitoring. This allows me to ensure that the correct
page is displayed, even when the user has yet to make a selection.

Tip

The result of these additions is that clicking an item in the list allows the user to edit its
details, while marking the item done or adding a new item clears the selection and hides the
detail page. You can see the effect in Figure 3-4 .
The code in the callback for a page is executed every time that page is displayed. You need to
ensure that your code doesn't make assumptions about the state of the elements in your page,
other than they have been loaded and added to the main layout. Since a page is loaded within
the context of the main layout, you can safely use the functions defined by JavaScript code used
by the main HTML document. In my example, this includes the view model. Similarly, your ele-
ments will be subject to the CSS styles that the main document defines.

Figure 3-4. Allowing the user to edit the details of a grocery list item