Life-Cycle Events - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 84

case-insensitive search through the items in the view model. If there is a match, then I set the
selectedItemIndex property in the view model, which, through the magic of binding, will
cause the matched item to be highlighted and for its details to be displayed.

■ As with all of the other JavaScript files in my project, I have added a script element to
default.html .

Tip

Implementing the Activated Event Handler
he activated event is used by the system to invoke the search contract, which means I have to
update the way I handle this event. Previously, an activated event just signaled “start the app,”
but now I have to pay attention to the event details to figure out what I am being asked to do.
Listing 5-6 shows the changes to the default.js le.

Listing 5-6. Determining the Activation Detail in an Event

(function () {
"use strict";
Windows.UI.WebUI.WebUIApplication.addEventListener("activated", function (e) {
var actNS = Windows.ApplicationModel.Activation;
if (e.previousExecutionState == actNS.ApplicationExecutionState.notRunning) {
performInitialSetup(e);
}
if (e.kind == actNS.ActivationKind.search) {
Search.searchAndSelect(e.queryText);
}
});
Windows.UI.WebUI.WebUIApplication.addEventListener("resuming", performResume);
Windows.UI.WebUI.WebUIApplication.addEventListener("suspending", performSuspend);
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);
});
WinJS.UI.Pages.render("/html/storeDetail.html",
document.getElementById("storeDetailTarget"));