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>
</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>
</body>
</html>
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
.
Tip
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.
Tip
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