- 首页
- 前端开发
- jQuery Mobile 导航 - 为什么状态为空?
jQuery Mobile 导航 - 为什么状态为空?
[英] jQuery Mobile navigate - Why is the state empty?
本文介绍了jQuery Mobile 导航 - 为什么状态为空?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 $.mobile.navigate("#test-page", {id:123}) 导航到二级页面.
从页面到页面的导航工作正常......但状态为空！
文档清楚地表明状态应该包含执行导航时我需要的所有信息.
这是我正在使用的代码:
$(window).on('navigate', function(event, data) {console.log("导航", 数据);控制台日志(数据状态.信息)；控制台日志(数据状态.方向)；控制台日志(data.state.url)；控制台日志(数据状态.哈希)；if (data.state.hash === "test-page") {console.log("测试页", data.state.id);}});
不幸的是，数据被传递为空:
<代码>{状态:{}}HTML 如下:
<div data-role="header"><h1>测试主页</h1>
<div data-role="内容"><div id="test-btn">单击测试"页面的 DIV
<div data-role="footer">
<div id="test-page" data-role="page"><div data-role="header"><h1>测试页</h1>
<div data-role="内容">测试页
<小时>
希望有人能帮忙.谢谢！
解决方案
$.mobile.navigate 和 navigate event，用于跟踪 URL 历史记录并从 URL 传递/获取数据.它们与浏览器的导航(后退/前进)一起使用.
要使用内部导航在 Web 应用程序内的页面之间动态传递数据，请使用 $.mobile.changePage.
资源:
使用下面的代码将数据从一个页面传递到另一个页面.
$.mobile.changePage('store.html', {dataUrl: "store.html?id=123",数据: {'id':'123'},reloadPage: true//强制页面重新加载});
检索数据
$('.selector').on('pagebeforeshow', function () {var values = $(this).data("url").split("?")[1];id = values.replace("id=", "");控制台日志(ID)；});
I'm using $.mobile.navigate("#test-page", {id:123}) to navigate to a secondary page.
The navigation from page to page works fine.... but the state is empty!
The docs clearly show that the state should contain all information I need when the navigation is performed.
This is the code I'm using:
$(window).on('navigate', function(event, data) {
console.log("navigated", data);
console.log(data.state.info);
console.log(data.state.direction);
console.log(data.state.url);
console.log(data.state.hash);
if (data.state.hash === "test-page") {
console.log("Test page", data.state.id);
}
});
Unfortunately data is passed as empty:
{
state:{}
}
The HTML is the following:
<div id="test-home" data-role="page">
<div data-role="header">
<h1>Test Home</h1>
</div>
<div data-role="content">
<div id="test-btn">
Click DIV for TEST page
</div>
</div>
<div data-role="footer">
</div>
</div>
<div id="test-page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
Test page
</div>
</div>
Hope that someone can help. Thanks!
解决方案
$.mobile.navigate and navigate event, are used to track URL history and pass/fetch data from URL. They work with browser's navigation (back / forward).
To pass data between pages dynamically within a webapp using internal navigation, use $.mobile.changePage.
Resources:
Use the below code to pass data from page to another.
$.mobile.changePage('store.html', {
dataUrl: "store.html?id=123",
data: {
'id': '123'
},
reloadPage: true // force page to reload
});
To retrieve data
$('.selector').on('pagebeforeshow', function () {
var values = $(this).data("url").split("?")[1];
id = values.replace("id=", "");
console.log(id);
});
这篇关于jQuery Mobile 导航 - 为什么状态为空?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
