HTML and CSS Reference
In-Depth Information
<script src="/js/viewmodel.js"></script>
<script src="/js/ui.js"></script>
<script src="/js/default.js"></script>
</head>
<body>
<div id="contentGrid">
<div id="leftContainer" class="gridLeft">
<h1 class="win-type-xx-large">Grocery List</h1>
<table id="listTable" class="type-table-header">
<thead>
<tr>
<th>Quantity</th>
<th class="itemName">Item</th>
<th class="store">Store</th>
</tr>
</thead>
<tbody id="itemBody"></tbody>
</table>
</div>
<div id="topRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Top Right Container</h1>
</div>
<div id="bottomRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Bottom Right Container</h1>
</div>
</div>
<!-- import HTML fragments -->
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri: '/html/appbar.html'}"></div>
<!-- end of HTML fragments -->
<!-- template for grocery list items -->
<table>
<tbody id="itemTemplate" data-win-control="WinJS.Binding.Template">
<tr class="groceryItem">
<td data-win-bind="innerText: quantity"></td>
<td data-win-bind="innerText: item"></td>
<td data-win-bind="innerText: store"></td>
</tr>
</tbody>
</table>
<!-- end of template for grocery list items -->
</body>
</html>
When you call the
WinJS.UI.processAll
method, WinJS finds all
div
elements whose
data-win-control
attribute is set to
WinJS.UI.HtmlControl
and sets their content to the
HTML fragment specified in the
data-win-options
attribute. You can't specify the fragment file
Search WWH ::
Custom Search