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

Ti ■ If you have used a web app view model library such as Knockout.js, you might be
used to updating view model values by calling methods, like this: ViewModel.UserData.
homeZipCode(myNewValue) . Knockout uses methods to preserve compatibility with older brows-
ers that don't support getters and setters, including most previous versions of Internet Explorer.
Internet Explorer 10, which is used to display HTML5 Metro apps, does support getters and set-
ters, which means you can assign values directly, just as I did in the example.
Creating Observable Arrays
Making arrays observable requires a little more effort. To begin with, you must use the WinJS.
Binding.List class to create a wrapper around the array you want to work with. Listing 2-8
shows the List class applied to my viewmodel in the viewmodel.js file.
Listing 2-8. Using the List Class to Create Observable Arrays
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
var shoppingItemsList=new WinJS.Binding.List();
var preferredStoresList=new WinJS.Binding.List();
WinJS.Namespace.define("ViewModel", {
UserData: WinJS.Binding.as({
homeZipCode: null,
getStores: function () {
return preferredStoresList;
},
addStore: function (newStore) {
preferredStoresList.push(newStore);
},
getItems: function () {
return shoppingItemsList;
},
addItem: function (newName, newQuantity, newStore) {
shoppingItemsList.push({
item: newName,
quantity: newQuantity,
store: newStore
});
}
})
});
w