Question

ELLO！

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

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（然后当我点击homePage按钮时 - 它会返回） - 但甚至不是初始页面转移正在进行中。

这是令人尴尬的问题，但我不能只是折叠我的手，等待一些神奇的事情发生。我一直在研究这个问题一小时 - 阅读视频和样本，但它根本不起作用。

会感谢帮助 - 我无法弄清楚出了什么问题。谢谢！

Answer 1

WinJS.Navigation命名空间提供状态和历史记录管理，但实际上并不进行导航。要从一个页面移动到另一个页面，您需要为WinJS.Navigation命名空间中的一个事件定义处理函数 - 这使您可以以对WinJS.Navigation.navigate方法有意义的方式响应对homePage.html方法的调用你的应用。

作为演示，这里是一个<!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一起，我定义了id为contentTarget的{{1}}元素。这是我的内容中用户单击NavBar命令时将加载新文件的位置。

澄清：您想要替换的所有内容都需要进入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>

导航在WinJS中无法正常工作

1 个答案: