使用IBM Worklight中的jQuery Mobile Framework进行多页面导航的问题 [英] Issue with multi-page navigation using jQuery Mobile Framework in IBM Worklight
问题描述
我正在使用jQuery Mobile Framework在IBM Worklight V6.2中开发一个示例移动银行应用程序。我阅读了IBM Worklight上的入门文档，并提到了一种使用片段实现多页面导航的方法。但是，它还指出，如果您使用的是JavaScript UI框架，请改用它的API。
I am developing a sample mobile banking app in IBM Worklight V6.2 using the jQuery Mobile Framework. I read the Getting Started Documentation on IBM Worklight and it mentions a way to implement multi-page navigation using fragments. However, it also states that if you are using a JavaScript UI Framework, use its API's instead.
我阅读了jQuery Mobile pagecontainer方法并正在实现它如下所示：
I read up on the jQuery Mobile pagecontainer method and am implementing it as below:
<li><a href="#" onclick="$(':mobile-pagecontainer').pagecontainer( 'change', 'BranchLocations.html' )" id="item1">Branch Locations</a></li>
但是，我遇到链接页面在点击链接但原始页面然后重新加载后加载的问题。有人可以向我解释为什么会这样吗？这是一个已知问题吗？
However, I get the issue that the linked page loads after clicking the link but the original page then reloads. Could someone explain to me why this is happening? Is this a known issue?
我发现了问题。我有一个链接到
I found the problem. I had a link to the
<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
在链接页面中。这就是它重新初始化原始索引页面的原因。
In the linked pages. That is the reason it was reinitializing the original index page.
推荐答案
使用jQuery Mobile 1.4.3的Pagecontainer小部件查看基于Worklight 6.2的应用程序。
在应用程序中，单击按钮以从index.html过渡to page1.html使用：
See this project for a Worklight 6.2-based app using jQuery Mobile 1.4.3's Pagecontainer widget.
In the app, you click on a button to transition from index.html to page1.html by using:
HTML
<a href="#" data-role="button" id="button-mainpage" onclick="changeToPage1();">load page1</a>
JavaScript
JavaScript
function changeToPage1() {
$(':mobile-pagecontainer').pagecontainer('change','page1.html');
}
您还可以参加查看以下问题，这些问题通过使用 changePage 的说明和项目示例来回答。
You may also take a look at the following questions that are answered with explanation and project examples for using changePage.
请注意，这些项目可能来自Worklight 6.0和6.1而不是6.2，但这与JavaScript无关，只需查看它。
Note that the projects may be from Worklight 6.0 and 6.1 rather than 6.2 but that does not matter as here it's about the JavaScript, simply review it.
- 如何在Worklight中使用Jquery Mobile在页面之间进行更改
- IBM Workligt包含所有应用程序页面的单个HTML文件：如何加载新页面？
- IBM Worklight 6.1 - 为什么Cordova代码放在子页面时不起作用？
- IBM Worklight - 页面碎片
- IBM Worklight - 多页应用中的导航错误
- 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文件的引用等。
In all of them, the idea is that Worklight is a Single Page Application. Thus you cannot load another HTML file and expect the application to continue functioning. By doing so you lose the "context" of the Worklight framework - the references to the included JS files, etc.
相反，您可以使用jQuery的加载或jQuery Mobile的 changePage （在v1.4中已弃用，将在v5中删除），以加载不同的页面。上面提供了大量的例子。
Instead, you can use jQuery's load or jQuery Mobile's changePage (deprecated in v1.4, to be removed in v5), to load different "pages". Ample examples are provided above.
这篇关于使用IBM Worklight中的jQuery Mobile Framework进行多页面导航的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
