HTML and CSS Reference
In-Depth Information
UI.List.displayListItems();
UI.List.setupListEvents();
UI.AppBar.setupButtons();
UI.Flyouts.setupAddItemFlyout();
var targetElement=document.getElementById("itemDetailTarget");
WinJS.Utilities.empty(targetElement)
WinJS.UI.Pages.render("/html/noSelection.html", targetElement);
});
}
…
The first two lines locate the placeholder element and remove any child elements that
already exist there. The final statement is the important one: I display the page by calling the
WinJS.UI.Pages.render
method. The arguments to this method are the URL of the HTML doc-
ument and the placeholder element where the content will be inserted.
When I call the
render
method, WinJS not only inserts the HTML from the specified file
into the document but ensures that my callback function, the one I defined in
pages.js
, is exe-
cuted. This allows me to process the elements, in this case, to insert details about how many
items are on the grocery list, as shown in Figure
3-3
.
Figure 3-3.
Using a page to associate a callback function with a fragment of HTML
Loading a Complete HTML Document
A variation on the page example is to work with complete HTML documents, rather than frag-
ments. The basic approach is the same, but I can include
script
and
link
elements to load
JavaScript and CSS files that are specific to the document. This means I can keep my callback
definition code and CSS styles separate from the rest of the application. To begin, I create a new
folder called
pages
and another one called
itemDetail
inside it. I then add a new HTML file
called
itemDetail.html
, which is shown in Listing 3-13.
Listing 3-13.
The itemDetail.html File
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="itemDetail.js"></script>
<link href="itemDetail.css" rel="stylesheet">
</head>
Search WWH ::
Custom Search