First steps with Windows 8 development - Build Windows 8 Apps with HTML5 and JavaScript - page 115

var randomNumber = { generatedValue: Math.floor((Math.random()*100)+1) };
// Enable binding on the HTML element of choice
var bindableElement = document.getElementById("numberContainer");
WinJS.Binding.processAll(bindableElement, randomNumber);
}
The two lines you added tell the Windows 8 runtime environment that the element named
numberContainer —the SPAN element—should be processed and bound to any content it can get
from the object randomNumber. At this point, the markup below now has full significance:
<span id="numberContainer" data-win-bind="innerText: generatedValue"></span>
The property innerText of the SPAN element named numberContainer will display the value
assigned to the property generatedValue of bound object randomNumber . Is that all? Well, not yet.
The missing link is when the code written in default.js will actually run. For this, you need one more
edit to default.js. You edit the line that calls setPromise, as shown below:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
// Initialize your application here.
document.addEventListener("DOMContentLoaded", displayGeneratedNumber);
} else {
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll()
.then(init()));
}
};
Next, you also add a new custom function called init at the bottom of the default.js ile.
function init() {
document.getElementById("numberButton").addEventListener("click",
numberButtonClick);
}
Are there any lessons you can learn from this example?
First and foremost, data binding is a powerful mechanism that unfolds all of its power when you
really manage enough complexity. Using declarative data binding when you only need to display
one piece of data is probably overkill. In this case, direct use of innerHtml is preferable. When you
have a list of items or multiple pieces of a single data item, then declarative data binding is preferable