使用 $.mobile.changePage 并传递数据答案

【问题标题】：Using $.mobile.changePage and passing data使用 $.mobile.changePage 并传递数据
【发布时间】：2010-12-21 15:12:19
【问题描述】：

我正在尝试学习自己的 jQuery Mobile。我认为这真的很酷，但我被困在了一些事情上。如果我想这样称呼：

$j.mobile.changePage({ url: $j("#News"), data: "apple=banana", type: "GET"}, "slide", true, true);

它似乎不起作用。我不知道用 jQuery 传递数据，所以也许我做错了什么。

亲切的问候，塞内

编辑：对不起，放错代码了……

【问题讨论】：

我认为这是一个错误。因为这确实有效 -> url: "#News"

标签： jquery methods jquery-mobile

【解决方案1】：

据我所知 - url 必须是一个真实的 url 或另一个div[data-role=page]的 id

澄清一下：

提供 ID 会显示当前文档中可用的另一个 div（您可以创建包含多个页面的 html 文件）。

另外 - jquerymobile 只加载一次页面，并将其添加到文档中以供以后参考。以后不会触发任何服务器端操作。（我不确定它如何处理提供数据的调用）

【讨论】：

要加载页面，你必须给它一个 URL。如果您将页面更改为当前 html 文档中已经存在的页面，数据应该发送到哪里？
我注意到了同样的行为；查看 Firebug 或 Fiddler，它向指定的 URL（无论是内部还是外部）发出请求，执行该正文中的所有请求，但不显示实际页面。我正在使用以下内容：链接

【解决方案2】：

根据反复试验，这是我看到的情况：

$.mobile.changePage('#'+id, filter, false, true) 刷新当前视图但不在服务器上执行请求
$.mobile.changePage({url:'#'+id, data:'code=apple=banana', type:'GET'}, 'slide', false, true) 没有刷新当前视图，但在服务器上执行请求
$.mobile.changePage({url:'http://localhost/SomeOtherPage.aspx', data:'code=apple=banana', type:'GET'}, 'slide', false , true) 刷新当前视图并在服务器上执行请求

看来，在服务器上执行时，基本 URL 必须不同才能更新当前视图。

【讨论】：

【解决方案3】：

我遇到了一个场景，我需要捕获一个项目上的点击事件并显示一个加载的页面（相同的 html 文件），其中包含被点击项目的详细信息。我找到的解决方案是半依赖于一些事情，但是：

您的 .js 方案应包含在至少一个“命名空间”或全局对象的属性中，以防止覆盖对全局对象重要的任何内容或被外部代码覆盖。
您的数据必须已经存在于 .js 对象中，并且可以通过其他方式访问。

将点击事件附加到导致页面转换的元素（甚至是导致页面转换有问题的函数）允许您创建如下函数：

function PageTransitionHandle(oEvent)
{
   // Set your stored data to a global object
   oYourNamespace.DataObject = oDataObject;

   // not necissary if already linked to other page but useful when attaching to
   // an image  or other element
   $.mobile.changePage("#otherPageId");
}

并在下一页的 pageshow 事件中：

function PageInit()
{
   var oPageData = oYourNamespace.DataObject;
   // Handle using data from here (i.e calling webmethod using parameters 
   // or setting data according to object)
}

这可能适用于外部页面和内部页面，因为使用了 ajax 加载方法，但我没有测试过。这对于传递参数甚至整个数据对象以定义其他字段或让用户信息跟随它们非常有用。

另一条路线是Local Storage，但我个人还没有看过这么多

【讨论】：