使用IBM Worklight中的jQuery Mobile Framework进行多页面导航的问题

Question

我正在使用jQuery Mobile Framework在IBM Worklight V6.2中开发一个示例移动银行应用程序。我阅读了IBM Worklight上的入门文档，并提到了一种使用片段实现多页面导航的方法。但是，它还指出，如果您使用的是JavaScript UI框架，请改用其API。

我阅读了jQuery Mobile pagecontainer方法，并按照以下方式实现：

<li><a href="#" onclick="$(':mobile-pagecontainer').pagecontainer( 'change', 'BranchLocations.html' )" id="item1">Branch Locations</a></li>

但是，我遇到链接页面在单击链接后加载但原始页面重新加载的问题。有人可以向我解释为什么会这样吗？这是一个已知的问题吗？

---

我发现了问题。我有

的链接

<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>

在链接页面中。这就是它重新初始化原始索引页面的原因。

Answer 1

See this project使用jQuery Mobile 1.4.3的Pagecontainer小部件构建基于Worklight 6.2的应用程序。
在应用程序中，单击按钮以使用以下命令从index.html转换为page1.html：

HTML

<a href="#" data-role="button" id="button-mainpage" onclick="changeToPage1();">load page1</a>

的JavaScript

function changeToPage1() {
    $(':mobile-pagecontainer').pagecontainer('change','page1.html');
}

---

您还可以查看以下使用changePage的说明和项目示例回答的问题。

请注意，这些项目可能来自Worklight 6.0和6.1，而不是6.2，但这与JavaScript无关，只需查看它即可。

• How to change between pages using Jquery Mobile in Worklight
• IBM Workligt Single HTML file containing all application pages: How to load new page?
• IBM Worklight 6.1 - Why is Cordova code not working when placed in a sub-page?
• IBM Worklight - Page fragmentation
• IBM Worklight - Navigation errors in a multipage app

在所有这些中，我们的想法是Worklight是单页应用程序。因此，您无法加载另一个HTML文件并期望应用程序继续运行。通过这样做，您将失去Worklight框架的“上下文” - 对包含的JS文件的引用等。

相反，您可以使用jQuery的load或jQuery Mobile的changePage（在v1.4中弃用，将在v5中删除）来加载不同的“页面”。上面提供了大量的例子。