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

Creating Dynamic Bindings
The binding that I used in the previous example is static , meaning that there is no ongoing relation-
ship between the value of the view model property and the value of the span element that contains
the binding declaration. Static bindings are like a snapshot of a view model value. Once the snap-
shot has been taken, the value in the markup is fixed, even if the value of the property changes.
Dynamic bindings , where property changes do result in updated elements, are more use-
ful for most applications. In WinJS, declarative bindings are automatically dynamic when the
data property they depend on is observable . To create an observable property, I have to use the
WinJS.Binding.as method in my view model, as Listing 2-4 shows.
Listing 2-4. Creating an Observable Item in the View Model
/// <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: WinJS.Binding.as({
// 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,
quantity: newQuantity,
store: newStore
});
}
})
});
ViewModel.UserData.homeZipCode="NY 10118";
ViewModel.UserData.addStore("Whole Foods");