HTML and CSS Reference
In-Depth Information
ready: function (targetElement) {
document.getElementById("numberCount").innerText
= ViewModel.UserData.getItems().length;
}
});
})();
The callback function is set up through the
WinJS.UI.Pages.define
method. he arguments
are the URL of the HTML file that will be loaded and an object whose properties define the func-
tions that will be executed when this happens. In the Consumer Preview, the only property that
works reliably is
ready
, and the function assigned to this property will be executed when the
HTML has been loaded and processed by the Metro runtime.
In this example, my
ready
callback function locates the
span
element in the
noSelection.
html
markup and sets its content to be the number of items on the grocery list. I have added a
script
element to the
default.html
file to load
pages.js
:
…
<!-- MetroGrocer references -->
<link href="/css/list.css" rel="stylesheet">
<link href="/css/flyouts.css" rel="stylesheet">
<link href="/css/default.css" rel="stylesheet">
<script src="/js/viewmodel.js"></script>
<script src="/js/ui.js"></script>
<script src="/js/pages.js"></script>
<script src="/js/default.js"></script>
…
Loading and Displaying the HTML
he
define
method doesn't load the HTML; it just sets up the callbacks. To display the content, I
need to pick a place to insert it in the
default.html
file. You can see the addition in Listing 3-11.
No special attributes are required for the placeholder; a regular
div
element will do, ideally with
an
id
attribute so you can easily locate it later.
Listing 3-11.
Adding a Page Placeholder Element in default.html
…
<div id="topRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Item Detail</h1>
<div id="itemDetailTarget"></div>
</div>
…
The final step is to display the page within the target element. You can see the additions to
the
default.js
file in Listing 3-12.
Listing 3-12.
Loading a WinJS Page
…
function performInitialSetup(e) {
WinJS.UI.processAll().then(function () {
Search WWH ::
Custom Search