JQuery Mobile 加载 Wicket BookmarkablePageLink 时出错

Question

我是 JQuery Mobile 新手。我有一个基于 Apache Wicket 的应用程序，我想在其上尝试 JQuery Mobile，以便它在移动设备上看起来更令人愉悦。不幸的是，我在所有页面链接中都收到“Error Loading Page”错误，在切换到 JQuery Mobile 之前我从未遇到过问题。根本原因似乎是 HTTP 请求中包含的 URL。我使用了JQuery Mobile 1.2.0、JQuery 1.8.0、Wicket 1.5.5，使用jetty服务器6.1.26和FireFox 16.0进行了本地测试。这是代码片段:

        <ul data-role="listview" data-theme="b">
          <li><a href="#" wicket:id="metaprofileList" rel="external">List</a>
          </li>
        </ul>

对应的java代码:

    add(new BookmarkablePageLink<MetaprofileListPage>(
            "metaprofileList", MetaprofileListPage.class));

基于上述，Wicket 正确地将 href="#" 中的 "#" 替换为页面所在的真实 URL，因此最终的 HTML 如下所示:

        <ul data-role="listview" data-theme="b">
          <li><a href="com.alcatel_lucent.nms8770.awol.client.web.page.MetaprofileListPage" wicket:id="metaprofileList" rel="external">List</a>
          </li>
        </ul>

当点击链接时，Jetty 服务器会发送带有以下 URL 的 HTTP 请求:

GET http://127.0.0.1:7999/com.alcatel_lucent.nms8770.awol.client.web.page.MetaprofileListPage [HTTP/1.1 404 Not Found 0ms]

这不是 MetaprofileListPage 的正确 URL。在切换到 JQuery Mobile 之前，我使用相同的场景进行了测试，相同的 jetty 服务器使用正确的 url 发送以下 HTTP 请求:

GET http://127.0.0.1:7999/wicket/bookmarkable/com.alcatel_lucent.nms8770.awol.client.web.page.MetaprofileListPage?7 [HTTP/1.1 200 OK 0ms]

我所做的唯一更改是将 HTML 文件中的标题从:

<link rel="stylesheet" type="text/css" href="../../css/phone.css" media="only screen and (max-width: 480px)"/>
<link rel="stylesheet" type="text/css" href="../../css/default.css" media="only screen and (min-width: 1025px)"/>
<link rel="stylesheet" type="text/css" href="../../css/portrait.css" media="all and (max-device-width: 1024px) and (orientation:portrait)"/>
<link rel="stylesheet" type="text/css" href="../../css/landscape.css" media="all and (max-device-width: 1024px) and (orientation:landscape)"/>
<meta name="viewport" content="user-scalable=no, width=device-width"/>

标准样板 jquery mobile 包括:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />  
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>  
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>        

我已经为此苦苦挣扎了两周了:-(我需要做什么才能让 JQuery Mobile 加载正确的网址/页面？请帮忙!!非常感谢!!

Answer 1

您可能应该将可添加书签的页面安装在一个简短的、众所周知的片段下，例如

• http://example.com/cheeses/edam
• http://example.com/profile

您通常在覆盖 Application#init 时执行此操作方法，如:

@Override
protected void init() {
    mountPage("/cheeses/${cheese}", CheesePage.class);
    mountPage("/profile", MyProfile.class);
}

这至少会删除那些包名称。