4

エロ！

アプリバーのアイコンがあり、クリックイベントで-次のコードを持つ関数を追加しました：

function homePage() {

    WinJS.Navigation.navigate("/home/homePage.html");

}

これで、2つのファイルがあります。/home/内にあるhomePage.htmlと同じファイルのjsファイルです。

IDNextPageのhtmlには簡単なボタンがあります。

homePage.jsファイルにある間、私は持っています：

function () {
    "use strict";

    WinJS.UI.Pages.define("/home/homePage.html", {
        ready: function (element, options) {
           var button = document.getElementById("NextPage");
           button.addEventListener("click", GoToNextPage);
        }
    });
    function GoToNextPage() {
        WinJS.Navigation.navigate("/default.html");
    }

})();

しかし、アプリバーのアイコンをクリックしても何も起こりません:(

したがって、私が達成しようとしているのは、誰かがdefault.htmlのappbarアイコンをクリックすると（ユーザーはhomePage.htmlに切り替わります（次に、homePageボタンをクリックすると元に戻ります））、最初のページ転送でさえも実行されないということです。場所。

これは恥ずかしいことですが、手を組んで魔法のようなことが起こるのを待つことはできません。私はこれに1時間取り組んできました-ビデオとサンプルを読んでください、しかしそれはまったく機能していません。

助けていただければ幸いです-何が悪いのか理解できません。ありがとう！

4

1 に答える 1

7

名前WinJS.Navigation空間は状態と履歴の管理を提供しますが、実際にはナビゲーション自体は行いません。あるページから別のページに移動するには、名前空間内のイベントの1つにハンドラー関数を定義する必要があります。これにより、アプリにとって意味のある方法でメソッドWinJS.Navigationの呼び出しに応答できます。WinJS.Navigation.navigate

デモンストレーションとしてhomePage.html、ナビゲーションのトリガーとなるコマンドを含むNavBarを含むファイルを次に示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>NavProject</title>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/homePage.js"></script>
</head>
<body>
     <div id="contentTarget">
            <h1>Select a page from the NavBar</h1>
    </div>
    <div id="navbar" data-win-control="WinJS.UI.AppBar" 
        data-win-options="{placement:'top'}">

        <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'NextPage', label:'Next Page', 
                icon:'\u0031', section:'selection'}">
        </button>  
    </div>
</body>
</html>

NavBarとともに、である要素を定義しましdivた。これは、ユーザーがNavBarコマンドをクリックしたときに新しいファイルが読み込まれるコンテンツ内の場所です。idcontentTarget

明確化：置き換えたいコンテンツはすべてcontentTarget要素に入れる必要があります。そうしないと、古いコンテンツと新しいコンテンツが混在して表示されます。

そして、これがそれを接続するJavaScriptファイルです（これは、homePage.js上記のHTMLファイルにスクリプト要素を追加したファイルです）。

(function () {
    "use strict";

    WinJS.Navigation.addEventListener("navigating", function (e) {
        var elem = document.getElementById("contentTarget");

        WinJS.UI.Animation.exitPage(elem.children).then(function () {
            WinJS.Utilities.empty(elem);
            WinJS.UI.Pages.render(e.detail.location, elem)
                .then(function () {
                    return WinJS.UI.Animation.enterPage(elem.children)
                });
        });
    });

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        args.setPromise(WinJS.UI.processAll());

        navbar.addEventListener("click", function (e) {
            if (e.target.id == "NextPage") {
                WinJS.Navigation.navigate("/nextPage.html");
            }
        }, true);

    };
    app.start();
})();

WinJS.Navigation.navigatingイベントのハンドラー関数を追加したことに注目してください。このイベントはへの呼び出しによってトリガーされWinJS.Navigation.navigate、ナビゲーションターゲットの詳細はdetail.locationイベントオブジェクトのプロパティに含まれます。

この例では、ターゲット要素のコンテンツをすべてクリアし、それをターゲットファイルのコンテンツに置き換えて、一方から他方への遷移をアニメーション化します。

イベントに対して1つのハンドラーを定義するだけで済みます。nextPage.htmlつまり、ナビゲーションにつながる要素がある場合は、次WinJS.Navigation.navigateのように、新しいイベントハンドラーを作成せずに呼び出す必要があります。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script>
            WinJS.UI.Pages.define("/nextPage.html", {
                ready: function () {
                    back.addEventListener("click", function () {
                        WinJS.Navigation.navigate("/homePage.html");
                    });
                }
            });
        </script>
    </head>
    <body>
        This is next page.
        <button id="back">Back</button>
    </body>
</html>
于 2012-09-16T07:29:31.550 に答える