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

Tracking the Selected Item
In the displayListItems function, I updated the value of the ViewModel.State.selectedIte-
mIndex property to keep track of which item in the table element had been selected. It is now
time to define this property. Listing 2-13 shows the addition to the viewmodel.js file.
Listing 2-13. Defining the selectedItemIndex Property
/// <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
});
}
}),
State: WinJS.Binding.as({
selectedItemIndex: -1
})
});
// …test data removed for brevity …
})();
I use the >State object to differentiate between data required for the current state of the
app and data created by the user (which is represented by the UserData object).