States of a Windows 8 application - Build Windows 8 Apps with HTML5 and JavaScript - page 183

In the SnapMeApp.init function, you initialize the application's state and register a handler for
the click event of the button. You also register the SnapMeApp.init function to be invoked when the
application is ready. You need the following code in default.js :
app.onready = function (args) {
SnapMeApp.init();
};
This is the markup you need to have in the body of the default.html page, placed in between the
header and footer pages:
<h1>My App</h1>
<h2 id="currentViewState"></h2>
<hr />
<button id="buttonCounter">Counter</button>
<h3 id="total"></h3>
Another new concept to practice with is the separation between state, behavior, and the logic
that updates the user interface. You add the following code to express the behavior associated with
clicking the button. This code goes at the bottom of the SnapMeApp.js file:
SnapMeApp.add = function () {
// This is part of the application's behavior
SnapMeApp.Current.total++;
// This updates the user interface
SnapMeApp.refresh();
}
Finally, you add the following code for refreshing the user interface:
SnapMeApp.refresh = function () {
// Update the label with the current view state
var stateElem = document.getElementById("currentViewState");
stateElem.innerHTML = SnapMeApp.Current.currentViewState;
// Update the label with the total number of clicks
var totalElem = document.getElementById("total");
totalElem.innerHTML = SnapMeApp.Current.total;
}
With the SnapMeApp.refresh function in place, you don't need to retrieve information from
controls before updating the user interface. Likewise, you don't need to refresh the user interface
directly from the code that handles events on visual elements. In this way, the entire code is cleaner
and easier to develop and improve.