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

In the click handler, you need to do a couple of things. First, you retrieve the index of the selected
item and from there the bound photo. Second, you navigate to the detail page. Open the gallery.js
file and add the following code:
GalleryApp.getCurrentPhotoIndex = function () {
return document.getElementById("gallery").winControl.currentPage;
};
GalleryApp.showDetails = function () {
var currentIndex = GalleryApp.getCurrentPhotoIndex();
var photo = GalleryApp.Gallery.photos.getAt(currentIndex);
WinJS.Navigation.navigate("/pages/details/details.html", photo);
};
The currentPage property of the FlipView component returns the index of the clicked item. You use
the getAt method of the binding list to retrieve the actual Photo component that the user clicked. A
binding list is just a wrapper around an array of objects that is created only for data binding purposes.
Defining the detail page
Now that you hold the selected Photo object, you can think of the detail page. The purpose of the
detail page is simply to show more information about a particular Photo object. As shown in Figure
7-8, you add a new Page control under the pages/details folder. The details folder should be created
before you try to add the details.html page.
The Visual Studio wizard adds three new files to the project: details.html, details.css , and details.js .
FIGURE 7-8 Adding a detail page.