Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 159

You define a page object and also specify a couple of lifecycle events: ready for when the page is
loaded, and unload for when the page is navigated away and then unloaded. In the ready event you
complete initialization by retrieving any passed data and binding it to internal data structures.
The detail page may receive optional information from the caller page. In this case, the detail page
receives information about the photo to display. Any cross-page information is retrieved via the state
property of the WinJS.Navigation object. This remark introduces another whole point to consider
about navigation: how to share data between pages.
passing data between pages
In gallery.js , the code that navigates to the detail page is shown below:
WinJS.Navigation.navigate("/pages/details/details.html", photo);
What's the role of the photo argument? The answer is any parameter(s) you want to pass to the
destination page. It can be any JavaScript object and the actual content is up to you. Put another
way, you are free to give this object any shape that suits your needs. This value is retrieved by the
destination page through the state property of the WinJS.Navigation object.
With this code in place, try running the application.
You navigate to, say, the third photo in the flip view, click the photo, and go to the detail page.
The detail page just shows the title of the photo; everything is working as expected in Figure 7-9.
FIGURE 7-9 The detail page with the Back button.