javascript - 为什么我的 SettingsFout 上的就绪函数没有被命中？-6ren

javascript - 为什么我的 SettingsFout 上的就绪函数没有被命中？

转载作者：行者123 更新时间：2023-12-02 18:35:33

我已经实现了一个SettingsFlyout。从该弹出窗口的 View 来看，我的应用程序从用户(名字)收集了一些信息，并希望将其存储在漫游设置中。当用户单击设置 View 中的按钮时，此信息将被存储，并在弹出窗口的 beforeShow 事件中检索。这两个事件是在 SettingsFlyout 本身的就绪函数中设置的，但由于某种原因，该就绪函数没有被调用。结果，事件没有结果并且没有被调用。现在让我向您展示代码。这是我在 default.html 中的内容

app.onsettings = function (e) {

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

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

这是 test.html 本身。

<!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>

这是 test.js 文件。

(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.
        }
    });
})();

我在这里做错了什么以及如何调用准备好的函数？

最佳答案

看起来像<script>标签 test.js test.html 中缺少

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

欢迎评论。 html 丢失 id这些元素的属性。因此，getElementById正在失败。话虽如此document.getElementById()不一定是实现这一目标的最佳方法。考虑使用 class html 中的属性和 element.querySelector('.myclass')它将查询范围限定为页面的根元素；跨页面的 id 冲突范围也被删除。

<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"

关于javascript - 为什么我的 SettingsFout 上的就绪函数没有被命中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17354760/