HTML and CSS Reference
In-Depth Information
ready: function (targetElement) {
= 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>
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