HTML and CSS Reference
In-Depth Information
var targetElement=document.getElementById("itemDetailTarget");
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>
<script src="itemDetail.js"></script>
<link href="itemDetail.css" rel="stylesheet">
Search WWH ::

Custom Search