设置弹出窗口中的 WinJs Catch 事件答案

【问题标题】：WinJs Catch event in settings flyout设置弹出窗口中的 WinJs Catch 事件
【发布时间】：2013-09-22 06:44:48
【问题描述】：

我有一个反馈设置弹出按钮 (feedback.html)：

<!DOCTYPE html>
<html>
<head>
    <title>Feedback settings flyout</title>
</head>
<body>
    <div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
                data-win-options="{settingsCommandId:'feedback'}">
            <div class="win-header" style="background-color: rgb(246, 84, 84)">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Feedback</div>
            </div>
            <div class="win-content">
                <section>
                    <label for="titleInput">Title: </label>
                    <input id="titleInput" style="display:block"/>
                </section>
                <section>
                    <label for="feedbackBody">Content: </label>
                    <textarea style="width:250px; height:400px;" id="feedbackBody">
                    </textarea>
                </section>
                <button id="submit">Submit feedback</button>
            </div>

    </div>
</body>
</html>

我的问题是：如何在此弹出窗口上运行代码隐藏？ feedback.js 永远不会加载，我只想在用户单击按钮时向我发送他刚刚输入的文本。我该怎么做？

【问题讨论】：

看不懂你的问题，feedback.js在哪里？什么是flyout，你的意思是布局？如果想在点击按钮时获取文本，可以给按钮绑定一个点击事件，如$('button').click(callback)。对于页面通信，可以将文本附加到url作为get参数，url.com?text=realtext
老兄，阅读标签，这是一个 Windows 8 应用程序，这不是在浏览器中运行的

标签： javascript windows-8 settings winjs flyout

【解决方案1】：

查看应用设置示例 (Win8 | Win8.1)，在场景 2 中，您将了解如何构建背后的代码。

Flyouts 是 WinJS 页面控件的衍生产品，因此您可以使用 WinJS.UI.Pages.define 构建代码，并在其中定义 ready 和 unload 等方法。

更具体地说，示例的场景 2 启用浮出控件，如下所示 (js/2-AddFlyoutToCharm.js)：

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = { "help": { title: "Help", href: "/html/2-SettingsFlyout-Help.html" } };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

浮出控件在 html/2-SettingsFlyout-Help.html 中定义，它定义了一个 WinJS.UI.SettingsFlyout，就像你做的那样，但是在 head 元素中有这个::

<script src="/js/2-SettingsFlyout-Help.js"></script>

那个js文件，在项目的js文件夹中，有你需要的页面控制结构，里面有代码隐藏（这里只展示一部分）：

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/2-SettingsFlyout-Help.html", {

        ready: function (element, options) {
            // Register the handlers for dismissal
            document.getElementById("helpSettingsFlyout").addEventListener("keydown", handleKeys);
        },

在该代码中，您可以获取ElementById/querySelector 并根据需要添加事件。同样，它为后退按钮添加了一个键盘处理程序（并且还删除了 unload 事件中的侦听器）。

顺便说一句，您希望将所有代码放在 ready 方法中，以确保在您尝试访问元素之前已将浮出控件添加到 DOM。如果你把 JS 放在页面控制结构之外，它会被 DOM 执行，不会为你准备好。

Kraig（作者，Programming Windows 8 Apps in HTML, CSS, and JavaScript，Microsoft Press 提供的免费电子书）

【讨论】：