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

■ I have used the Promise object as a wrapper around the two Promise objects rep-
resenting the request for location data and the subsequent Ajax request. When both my inner
Promise objects have finished, I call the complete function, which is passed to the callback
function I used when I created the Promise object. See the API reference for more information
about the WinJS.Promise object.

Tip

Each time the request completes, I create another Promise encapsulating a new request,
repeating as long as the tracking variable is true . I start a new request cycle every five seconds.
When I call the stopTracking function, I set the tracking variable to false and return the
Promise representing the current request cycle. The Promise I return represents a request cycle
in one of two states. The first state is when the request is active, meaning that I am waiting for
the geolocation data or the Ajax request to complete, or I am applying an update to the DOM.
If you call the then method on an active Promise , the callback function won't be executed until
the cycle is complete. The second state is when the request is complete and I am in the lull
before the next cycle starts. Calling the then method on a completed Promise will cause the
callback function to be executed without delay.
With this in mind, I am able to integrate my background task into default.js using the
handlers for the different life-cycle events, as shown in Listing 5-4.

Listing 5-4. Using the Life-Cycle Events to Control a Background Task
(function () {
"use strict";
Windows.UI.WebUI.WebUIApplication.addEventListener("activated",
performInitialSetup);
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"));