Windows 8 在WinJS中导航未按预期工作_Windows 8_Windows Runtime_Winjs

Windows 8 在WinJS中导航未按预期工作

windows-8 windows-runtime

Windows 8 在WinJS中导航未按预期工作,windows-8,windows-runtime,winjs,Windows 8,Windows Runtime,Winjs,喂我有一个应用程序栏图标，在单击事件上-我添加了一个函数，该函数具有以下代码： function homePage() { WinJS.Navigation.navigate("/home/homePage.html"); } 现在我有两个文件-home/中的homePage.html和相同的js文件在id下一页的html上有一个简单的按钮在homePage.js文件中，我有： function () { "use strict"; WinJS.UI.Pag

喂

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

function homePage() {

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

}

现在我有两个文件-home/中的homePage.html和相同的js文件

在id下一页的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按钮时，它会返回），但即使是最初的页面传输也不会发生

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

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

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>

请注意，我如何为

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>


定义（“/nextPage.html”{
就绪：函数（）{
back.addEventListener（“单击”），函数（）{
WinJS.Navigation.navigate（“/homePage.html”）；
});
}
});
这是下一页。
返回

如果你进入VS中的.navigate调用，会发生什么？如果你一直跟踪它，它会失败吗？你在调用的HTML文档中是否包含了homePage.js。navigate-in？嘿。是的，homePage.js位于homePage.HTML的头部src中。实际上没有发生导航-我没有收到任何错误：（homePage.html是清单中的起始页吗？您的JS文件需要包含在应用程序的起始页（或者更具体地说，是启动导航的页面）中。它也在default.html（homePage）中（我从那里启动导航）嘿，亚当..一个小困惑：你提到的JS文件是HomePage.JS，对吗？我不需要在我导航到的文件的JS部分编写任何程序吗？没错-在你试图访问的文件中不需要任何东西。（我在答案中添加了一句话以使其更清楚）好的。所以它部分工作lol。它显示了新的页面（半透明）在当前的default.html上，左边的动画消失了。我该如何解决这个问题？好的-从你的问题来看，我认为你已经用homePage.html替换了default.html。你需要在default.html中定义导航栏，并将导航事件处理代码移到default.js。我会在一秒钟内更新我的答案在我的情况下，是的fault.html是homePage.html:），我正在从默认导航到主页（在你的例子中是nextPage）。我已经在default中定义了navbar，在default.js中定义了导航事件。所以，是的，我几乎完成了所有这些。

<!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>