5

我正在使用$.mobile.navigate("#test-page", {id:123})导航到辅助页面。

从一页到另一页的导航工作正常....但是状态是空的！

文档清楚地表明状态应该包含执行导航时我需要的所有信息。

这是我正在使用的代码：

$(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);
  }
});

不幸的是，数据作为空传递：

{
    state:{}
}

HTML如下：

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

希望有人能提供帮助。谢谢！

4

2 回答 2

3

$.mobile.navigate和navigate event，用于跟踪 URL 历史记录并从 URL 传递/获取数据。它们与浏览器的导航（后退/前进）一起工作。

要使用内部导航在 webapp 内的页面之间动态传递数据，请使用$.mobile.changePage.

资源：

使用下面的代码将数据从页面传递到另一个页面。

$.mobile.changePage('store.html', {
 dataUrl: "store.html?id=123",
 data: {
    'id': '123'
 },
 reloadPage: true // force page to reload
});

检索数据

$('.selector').on('pagebeforeshow', function () {
 var values = $(this).data("url").split("?")[1];
 id = values.replace("id=", "");
 console.log(id);
});
于 2013-04-02T15:27:56.913 回答
1

我知道这是一个老问题，但@Omar 的答案可以改进。

事实上，可以使用pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransitionand pagecontainerchange（它们按此顺序触发）并且在处理程序中您可以读取属性history.state，此时会使用新状态进行更新。

因此，例如，您可以编写（初始化需要已格式化页面的内容，例如 Google 地图）：

$(document).on("pagecontainershow", function(e, data) {
    console.log("pagecontainershow: " + JSON.stringify(history.state));     
});

这适用于所有情况：如果您单击链接（带有哈希，例如#user），如果您使用后退和前进按钮导航，如果您使用$.mobile.navigateand 也 for window.history.back()。

而且，您可以传递复杂的数据，而不仅限于查询字符串约束。

资源：

于 2016-02-07T22:31:12.840 回答