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>
<meta charset="utf-8">
<!-- 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>
<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 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 id="topRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Top Right Container</h1>
Search WWH ::

Custom Search