HTML and CSS Reference
In-Depth Information
<h1 class="win-type-xx-large">Left Full Container</h1>
<div class="win-type-x-large">
The zip code is:
<span data-win-bind="innerText: UserData.homeZipCode"></span>
<div id="topRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Top Right Container</h1>
<div id="bottomRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Bottom Right Container</h1>
I have added a script element that adds viewmodel.js to the HTML document. he most
important addition, however, is the span element and its data-win-bind attribute.
The order of script elements is important in a Metro app, just like it is in a web app.
The code in my default.js file will depend on my view model, so I must ensure that the script
element for viewmodel.js appears before the one for default.js .
There are two parts to a declarative binding. The first part is the name of a property defined
by the HTMLElement object that represents the element in the Document Object Model (DOM).
I have used innerText , which will set the text content of the span element. The property name
is followed by a colon ( : ) and then the name of the data item that should be assigned to that
property. I have specified UserData.homeZipCode .
Declarative bindings will silently fail if you specify any property name that is also a
reserved JavaScript keyword. This means, for example, that you avoid using the class property
in bindings and use the className property instead.
It isn't enough just to add data-win-binding attributes to HTML elements. I also have to
tell the WinJS API to search through the document so that the binding attributes are found and
processed. Listing 2-3 shows the default.js file. I removed some of the comments that Visual
Studio creates and defined some placeholder functions that I'll build on later.
Listing 2-3. Processing WinJS Bindings
(function () {
"use strict";
Search WWH ::

Custom Search