4

你好！

我有一个应用栏图标，在点击事件上 - 我添加了一个具有以下代码的函数：

function homePage() {

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

}

现在我有两个文件 - homePage.html 位于 /home/ 和 js 文件中。

id 为 NextPage 的 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（然后当我点击主页按钮时——它会返回）——但即使是初始页面传输也不会占用地方。

问这个问题很尴尬，但我不能只是双手合十等待神奇的事情发生。我已经为此工作了一个小时 - 阅读视频和示例，但它根本不起作用。

非常感谢帮助 - 我不知道出了什么问题。谢谢！

4

1 回答 1

7

命名空间提供状态和历史WinJS.Navigation管理，但它本身并不实际进行导航。要从一个页面移动到另一个页面，您需要为命名空间中的一个事件定义一个处理函数——这使您能够以对您的应用程序有意义的方式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，我还定义了is的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事件对象的属性中。

在此示例中，我清除了目标元素中的所有内容并将其替换为目标文件的内容，并为从一个到另一个的过渡设置动画。

您只需为事件定义一个处理程序。这意味着如果我有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 回答