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

Table 2-1. Chapter Summary

Problem Solution Listing

Use the WinJS.Namespace.define method to create
a global object containing your application data.

Create a view model. 1

Use the data-win-bind attribute to create
declarative bindings and call the WinJS.Binding.
processAll method to process them.

Display values from the view
model.

2, 3

Use the WinJS.Binding.as method to create an
observable data property. Assign new values to the
property to trigger updates in the HTML.

Create a dynamic binding. 4, 6, 7

Create an observable data
properties in a globally
available namespace object.

Ensure that the object with the observable
properties isn't directly exported by the WinJS.
Namespace.define method.

5

Use the WinJS.Binding.List object. Create observable arrays. 8, 9, 10

Generate HTML elements
from observable arrays.

User the WinJS template feature. 11, 12

Listing 2-1. The Initial Contents of the View Model Class
/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";

WinJS.Namespace.define("ViewModel.UserData", {
// private members
_shoppingItems: [],
_preferredStores: [],
// public members
homeZipCode: null,

getStores: function () {
return this._preferredStores;
},
addStore: function(newStore) {
this._preferredStores.push(newStore);
},

getItems: function () {
return this._shoppingItems;
},
addItem: function(newName, newQuantity, newStore) {
this._shoppingItems.push({
item: newName,