gpt4 book ai didi

windows-8 - 导航在 WinJS 中无法按预期工作

转载 作者:行者123 更新时间:2023-12-04 23:59:28 26 4
gpt4 key购买 nike

你好!

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

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

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

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

最佳答案

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>

除了导航栏,我还定义了 divid 的元素是 contentTarget .这是我的内容中用户单击 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>

关于windows-8 - 导航在 WinJS 中无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12438343/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com