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

The BODY element of the details.html page should contain the following markup:
<div class="details fragment" type="button" />
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></
button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle"
data-win-bind="innerText: GalleryApp.DetailsPageModel.currentPhoto.
title">
</span>
</h1>
</header>
<section aria-label="Main content" role="main">
</section>
</div>
The most important thing in this page is the HEADER element. It contains the Back button that the
internal navigation system will use to let users return to the previous page. The CSS style win-back-
button does the trick of styling the button and it allows the system to retrieve the button wherever
you place it in the page.
The details.html page is bound to some data. Its model is represented by the GalleryApp.Details
PageModel object. You declare this object in gallery.js :
GalleryApp.DetailsPageModel = {};
When is this object actually initialized? It happens in the details.js file which you slightly edit to
contain the following code:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/details/details.html", {
ready: function (element, options) {
GalleryApp.DetailsPageModel.currentPhoto = WinJS.Navigation.state;
WinJS.Binding.processAll();
},
unload: function () {
// TODO: Respond to navigations away from this page.
}
});
})();