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

newOption.text=item;
if (selectedItem.store == item) {
newOption.selected=true;
}
selectElement.add(newOption);
});
WinJS.Utilities.query('#itemEditor input, #itemEditor select')
.listen("change", function () {
ViewModel.UserData.getItems().setAt(selectedIndex, {
item: document.getElementById("item").value,
quantity: document.getElementById("quantity").value,
store: document.getElementById("stores").value
});
});
}
})
})();
When I call the define method, I have to specify the complete path to the HTML document
that I want to be notified about. This means pages/itemDetail/itemDetail.html rather than
just itemDetail.html . This is different from the links to the CSS and JavaScript files defined
inside itemDetail.html , which are relative (i.e., just itemDetail.js ).
Since the Metro runtime for JavaScript apps is essentially a regular browser, the JavaScript
code is executed as soon as the script element is processed. This means that the callback func-
tion is registered before the document has been completely loaded and will then be called once
the document has been completely processed. This provides the foundation for a nice way to
keep pages self-contained, and you don't need to have the callbacks defined alongside the main
app code.
The callback function in this example is pretty simple and just uses the values from the
input and select elements to modify the list of grocery items using the WinJS.Binding.List.
setAt method. he setAt method completely replaces the item in the list and triggers an item-
changed event, which I showed you in Chapter 2 . This event causes the table element display-
ing the list items to be updated with the changes the user has made.

■ Since this page is a complete HTML document, you can reference multiple JavaScript
and CSS files; in fact, if you create a new Page item from the Add ➤ New Item menu, Visual
Studio will create an HTML file, a JavaScript file, and a CSS file and link them together.

Tip

Switching Between Pages
Now that I have two pages, I can switch between them in the main layout. I want to display the
noSelection.html page when no item has been selected and the itemDetail.html page when
a selection has been made. The simplest way to arrange this is to bind to the ViewModel.State.
selectedItemIndex property. Listing 3-15 shows the changes in the default.js file.