如何在 Worklight 中使用 Jquery Mobile 在页面之间进行更改答案

【问题标题】：How to change between pages using Jquery Mobile in Worklight如何在 Worklight 中使用 Jquery Mobile 在页面之间进行更改
【发布时间】：2014-03-04 12:07:45
【问题描述】：

我正在 Worklight 中从头开始一个项目。我正在使用 Jquery Mobile，我需要知道我想如何在页面之间进行转换。当我拖放一个新的列表视图时，使用超链接生成以下代码：

<ul data-role="listview" id="listview" data-inset="true">
        <li data-role="list-divider" id="divider">Divider</li>
        <li id="listitem"><a href="#">Item</a></li>
        <li id="listitem0"><a href="#">Item</a></li>
        <li id="listitem1"><a href="#">Item</a></li>
    </ul>

但是如果我考虑到“构建多页应用程序”指南，我不应该使用超链接......我应该怎么做？

【问题讨论】：

我不知道worklight 但在jQM 中通常使用锚点在页面之间移动。您可以将页面放在同一个文档上或通过 ajax 加载，因此在页面更改时会重新加载。这是预期的行为。

标签： jquery-mobile ibm-mobilefirst

【解决方案1】：

正如您正确提到的，Worklight 是一个单页应用程序。因此，您不能加载另一个 HTML 文件并期望应用程序继续运行。这样做会丢失 Worklight 框架的“上下文”——对所包含的 JS 文件的引用等。

为了实现多页导航，您可以使用 jQuery Mobile 的 changePage 或 jQuery 的 load 函数（或其他框架中的等效函数...），这取决于您希望应用程序的行为方式。

jQuery.mobile.changePage()
http://api.jquerymobile.com/jQuery.mobile.changePage/

.load()
http://api.jquery.com/load/

以下是几个展示页面导航的 Worklight 6.1 项目：

JQM_multipage_load_changePage.zip - 使用 .load 或 .changePage
JQM_multipage_changePage_pageshow.zip - 使用 .changePage 和 .pageShow

在这两种方法中，您都有 1 个 HTML 文件（Worklight 的 index.html）和多个其他 HTML 文件；您获取这些 HTML 文件的内容并用它替换 index.html 的特定子集。这样，Worklight 的 index.html 保持不变（对框架 JS 的引用等），但应用程序内容发生了变化。

根据您的具体情况，您可以将onclick 添加到您的href 并使用jQuery Mobile“转换”并显示“另一个”页面的内容。

【讨论】：