Why ready function on my SettingsFlout not getting hit?

StackOverflow https://stackoverflow.com/questions/17354760

문제

I have implemented a SettingsFlyout. From the view of this flyout, my app collection some info from user (firsname) and want to store it in roaming settings. This information get stored when user clicks a button the settings view and retrieved when in the beforeShow event for the flyout. These two events are setup in the ready function of the SettingsFlyout itself but for some reason this ready function is not been called. As a result the events are not result and not been invoked. Let me show you the code now. Here is what I have in default.html

app.onsettings = function (e) {

        e.detail.applicationcommands = {
            "test": {
                href: "/pages/settings/test/test.html",
                title: "Test"
            }
        }

        WinJS.UI.SettingsFlyout.populateSettings(e);
    };

Here is the test.html itself.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="/pages/settings/test/test.css" rel="stylesheet" />
    </head>
    <body>
        <div 
            data-win-control="WinJS.UI.SettingsFlyout"  data-win-options="{settingsCommandId:'test',  width:'narrow'}">
            <div class="win-header">       
                <div class="win-label">test</div>
            </div>
            <div class="win-content">
                First Name: <input id="firstname" />
                <br />
                <input type="submit" value="Save" />
            </div>
        </div>  
    </body>
</html>

Here is the test.js file.

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/settings/test/test.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) {
            // TODO: Initialize the page here.
            var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
            var divtest = document.getElementById("test").winControl;
            var firstname = document.getElementById("firstname");

            document.getElementById("submit").onclick = function (e) {
                //alert('hi');
                roamingSettings.values["firstname"] = firstname.value;
            }

            divtest.addEventListener("beforeshow", function () {
                firstname.value = roamingSettings.values["firstname"];
            });
        },

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

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        }
    });
})();

What am I doing wrong here and how can I ready function called?

도움이 되었습니까?

해결책

looks like <script> tag for test.js is missing in test.html

<head>
    <title></title>
    <link href="/pages/settings/test/test.css" rel="stylesheet" />
    <script src="/pages/settings/test/test.js"></script>
</head>

regards comments. html has missing id attributes for those elements. hence, getElementById is failing. Having said that document.getElementById() is not necessarily the best way to achieve that. consider using class attribute in html and element.querySelector('.myclass') which scopes the query to the root element for the page; also scope of collision of ids across pages is removed.

<div id="test"
        data-win-control="WinJS.UI.SettingsFlyout"  data-win-   options="{settingsCommandId:'test',  width:'narrow'}">
        <div class="win-header">       
            <div class="win-label">test</div>
        </div>
        <div class="win-content">
            First Name: <input id="firstname" />
            <br />
            <input id='submit' type="submit" value="Save"
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top