Integrating with the Windows 8 environment - Build Windows 8 Apps with HTML5 and JavaScript - page 232

In the settings.js file, you add the following code:
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/pages/settings.html", {
ready: function (element, options) {
document.getElementById("settingsContainer")
.winControl
.addEventListener("beforeshow", beforeShow);
document.getElementById("settingsContainer")
.winControl
.addEventListener("afterhide", afterHide);
}
});
function beforeShow() {
loadSettings();
};
function afterHide() {
saveSettings();
};
function loadSettings() {
var bindableElement = document.getElementById("settingsContainer");
WinJS.Binding.processAll(bindableElement, TodoList.settings);
};
function saveSettings() {
var priorityElem = document.getElementById("taskPriority_settings");
var currentPriority = priorityElem.value;
TodoList.settings.defaultPriority = currentPriority;
TodoList.settings.save();
};
})();
The code registers handlers for the beforeshow and afterhide events of the flyout behind the
Settings page. In this way, you can run your code just before the Settings panel is displayed and just
after it is hidden.
Needless to say, you initialize the controls in the Settings panel with current settings in the handler
of the beforeshow event and save changes back to the application settings in the handler of the
afterhide event.