HTML and CSS Reference
In-Depth Information
<div id="itemEditor">
<label for="item">Item:</label><input id="item">
<label for="quantity">Quantity:</label><input id="quantity">
<label for="stores">Store:</label>
<select id="stores" size="3"></select>
The markup in this file provides a select and two input elements to allow the user to edit
the details of a grocery list item. The difference from the previous example is that this is a com-
plete HTML document that contains a script element that imports the itemDetail.js file and
a link element that imports the itemDetail.css file, both of which I have created in the same
pages/itemDetail folder, alongside itemDetail.html .
The itemDetail.css file just contains some basic CSS styles; you can see these in the
source code download if you are interested, but there is nothing new or Metro-specific to see.
he itemDetail.js file contains the callback for when the page is loaded, as shown in
Listing 3-14.
Listing 3-14. Defining the Page Callback for the itemDetail.html Page
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
ready: function (targetElement) {
var selectedIndex=ViewModel.State.selectedItemIndex;
var selectedItem=ViewModel.UserData.getItems().getAt(selectedIndex);
var selectElement=WinJS.Utilities.query('select#stores')[0];
var list=ViewModel.UserData.getStores();
list.forEach(function (item) {
var newOption=document.createElement("option");
Search WWH ::

Custom Search