jquery-mobile – 如何在Worklight中使用Jquery Mobile更改页面

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

<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是一个单页应用程序.因此,您无法加载另一个HTML文件并期望应用程序继续运行.通过这样做,您将失去Worklight框架的“上下文” – 对包含的JS文件的引用等.

为了实现多页导航,您可以使用jQuery Mobile的changePage或jQuery的加载函数(或其他框架中的等价函数……),具体取决于您希望应用程序的行为方式.

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

.加载()
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等的引用),但应用程序内容已更改.

根据您的特定情况,您可以为您的href添加onclick并使用jQuery Mobile“转换”并显示“另一个”页面的内容.