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

var app = WinJS.Application;
app.onactivated = function (eventObject) {
if (eventObject.detail.kind ===
Windows.ApplicationModel.Activation.ActivationKind.launch) {
if (eventObject.detail.previousExecutionState !==
Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
performInitialSetup(eventObject);
} else {
performRestore(eventObject);
}
WinJS.UI.processAll();
}
};
app.oncheckpoint = function (eventObject) {
performSuspend(eventObject);
};
app.start();
function performInitialSetup(e) {
WinJS.Binding.processAll(document.body, ViewModel);
}
function performRestore(e) {
// TODO
}
function performSuspend(e) {
// TODO
}
})();
The import change is the call to the WinJS.Binding.processAll method. he arguments
are the element from which the processing should start and the source of data values for the
declarative bindings. By specifying the document.body element, I have told WinJS to process
the entire document. The second argument tells WinJS to use the ViewModel object as the data
source.
Declarative data bindings are relative to the data source, which is why the binding in my
example references UserData.homeZipCode and not ViewModel.UserData.homeZipCode :
<span data-win-bind="innerText: UserData.homeZipCode"></span>
The result of these changes is that the content of the span element is set to the value of the
homeZipCode property, as shown in Figure 2-1 .
Figure 2-1. Using a declarative binding to display view model values