Data and Bindings - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 28

<div id="bottomRightContainer" class="gridRight">
<h1 class="win-type-xx-large">Bottom Right Container</h1>
</div>
</div>
</body>
</html>
No Metro-specific technique is required to take the value from the input element and
update the view model value. Listing 2-7 shows the changes to the default.js file that respond
to the click event from the button element and update the view model using the value prop-
erty of the input element DOM object.
Listing 2-7. Updating the View Model in Response to the Change Event
…
function performInitialSetup(e) {
WinJS.Binding.processAll(document.body, ViewModel);
WinJS.Utilities.query('#newZipButton').listen("click", function (e) {
ViewModel.UserData.homeZipCode=WinJS.Utilities.query('#newZip')[0].value;
});
}
…
he WinJS.Utilities namespace contains subset of the functionality found in utility
libraries such as jQuery. The API is broadly the same as jQuery, but instead of the $ shortcut
function, querying elements is done through the WinJS.Utilities.query method. Not all of
the functionality of jQuery is available, but you can use the WinJS.Utilities namespace to
locate elements, apply CSS styles and classes, and set up handlers for events.
In this listing, I have used the query method to search the HTML document for the new-
ZipButton element and called the listen method on the result to set up a handler for the click
event. When the button is clicked, I locate the input element, read the value property from the
object, and assign it to the homeZipCode property in the view model.
The result from the query method is an array of elements. There is no equivalent to the
jQuery val method, so I treat the response like an array to get the HTMLElement object that rep-
resents the first element that matches my selector and then read the value property. The result
is that the user can enter a new zip code in the input element, and when the button is clicked,
the view model zip code value is updated. Since the update is applied to an observable prop-
erty, the content of the span element is updated automatically to show the new value through
its binding, as illustrated by Figure 2-2 .
Figure 2-2. Updating an observable value in the view model
5