HTML and CSS Reference
In-Depth Information
//
… members for UserData object go here…
})
});
…
he
define
method doesn't remove the private members of properties within the object it
exports, which allows me to export the private members of my
UserData
object by specifying it
as a property of the
ViewModel
object.
Updating an Observable Data Item
Updates from observable data items flow in only one direction, from the view model to the bind-
ing. You must use conventional JavaScript DOM API techniques to make data updates flow in
the other direction, from the elements to the view model. Listing 2-6 shows the addition of
input
and
button
elements to the markup in
default.html
for updating the
homeZipCode
property.
Listing 2-6.
Capturing Data That Will Be Used to Update the View Model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MetroGrocer</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.0.6/js/base.js"></script>
<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
<!-- MetroGrocer references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/viewmodel.js"></script>
<script src="/js/default.js"></script>
</head>
<body>
<div id="contentGrid">
<div id="leftContainer" class="gridLeft">
<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 class="win-type-x-large">
<label for="newZip">Enter new zip code:</label>
<input id="newZip" data-win-bind="value: UserData.homeZipCode"/>
<button id="newZipButton">Update Zip Code</button>
</div>
</div>
<div id="topRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Top Right Container</h1>
</div>
Search WWH ::
Custom Search