0

フィードバック設定フライアウト (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 が読み込まれることはありません。ユーザーがボタンをクリックして入力したテキストを送信するだけです。どうやってやるの？

4

1 に答える 1

1

アプリ設定のサンプル ( Win8 | Win8.1 ) を見てください。シナリオ 2 では、コード ビハインドを構造化する方法を確認できます。

フライアウトは 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);
        },

そのコード内で、getElementById/querySelector を取得し、必要に応じてイベントを追加できます。同じように、戻るボタンのキーボード ハンドラーを追加します (また、unload イベントでリスナーを削除します)。

ところで、要素にアクセスする前にフライアウトが DOM に追加されていることを確認するために、すべてのコードを ready メソッドに配置する必要があります。JS をページ制御構造の外に置くと、DOM によって実行されてしまい、準備が整いません。

Kraig ( Microsoft Press の無料電子ブック、 Programming Windows 8 Apps in HTML, CSS, and JavaScriptの著者)

于 2013-09-17T18:26:10.340 に答える