Commit settings instantly Windows 8 app

Question

I'm trying to make a test app for Windows 8 that has two input boxes and one button (lets call it "Calculate" button). When the user presses the button he gets a result. He can enter his details in either metric or imperial units by choosing which units he wants to use in the settings flyout. Now what I'm trying to do is to commit the changes instantly. When the user selects for example the imperial units the input boxes and the result automatically change to imperial. Right now when I change the units from metric to imperial I must press the "Calculate" button again to see the results in imperial. How can I do that?

Below is some of my code. In the default .js file I created a button handler:

var test = document.getElementById("button");
test.addEventListener("click", doDemo, false);

In the main .js file where all the calculations are done it looks like this:

function doDemo(eventInfo) {

    var applicationData = Windows.Storage.ApplicationData.current;
    var roamingSettings = applicationData.roamingSettings;

    if (roamingSettings.values["cmorft"] == 'imperial') {
        var greetingString3 = "Imperial";
        document.getElementById("units").innerText = greetingString3;
    } else {
        var greetingString4 = "metric";
        document.getElementById("units").innerText = greetingString4;
    }

I used the following to save the user's choice:

var applicationData = Windows.Storage.ApplicationData.current;
var roamingSettings = applicationData.roamingSettings;

    WinJS.UI.Pages.define("/html/settings.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var imperialRadio = document.getElementById("imperial"),
                metricRadio = document.getElementById("metric");

            // Set settings to existing values
            if (roamingSettings.values.size > 0) {
                if (roamingSettings.values["cmorft"]) {
                    setMIValue();
                }
            }

            // Wire up on change events for settings controls
            imperialRadio.onchange = function () {
                roamingSettings.values["cmorft"] = getMIValue();
            };
            metricRadio.onchange = function () {
                roamingSettings.values["cmorft"] = getMIValue();
            };
        },

        unload: function () {
            // Respond to navigations away from this page.
        },

        updateLayout: function (element, viewState, lastViewState) {
            // Respond to changes in viewState.
        }

Answer 1

If I understand you correctly, you simply need to set the innerText properties of your HTML elements when you change the units, not just when you click the button. In your demo it can be as simple as calling doDemo from within the onchange handlers for your radiobuttons, as that will read the updated setting and set the text.