windows-8 – 导航在WinJS中无法正常工作

发布时间：2020-12-14 03:58:32 所属栏目：Windows 来源：网络整理

导读：ELLO！我有一个应用程序栏图标和点击事件 – 我添加了一个功能,其中包含以下代码： function homePage() { WinJS.Navigation.navigate("/home/homePage.html");} 现在我有两个文件 – homePage.html里面/ home /和js文件相同. id下一页的html上有一个简单的

ELLO！

我有一个应用程序栏图标和点击事件 – 我添加了一个功能,其中包含以下代码：

function homePage() {

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

}

现在我有两个文件 – homePage.html里面/ home /和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文件,其中包含一个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一起,我定义了id为contentTarget的div元素.这是我的内容中用户单击NavBar命令时将加载新文件的位置.

澄清：您想要替换的所有内容都需要进入contentTarget元素.否则,您将看到显示的旧内容和新内容的混合.

这里是连接它的JavaScript文件(这是我在上面的HTML文件中添加了一个脚本元素的homePage.js文件)：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!