JQuery Mobile 错误加载 Wicket BookmarkablePageLink答案

【问题标题】：JQuery Mobile Error Loading Wicket BookmarkablePageLinkJQuery Mobile 错误加载 Wicket BookmarkablePageLink
【发布时间】：2012-11-04 08:47:00
【问题描述】：

我是 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，并使用码头服务器 6.1.26 和 FireFox 16.0 进行了本地测试。这是代码sn-p：

        <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 服务器会发送如下 HTTP 请求，其 URL 如下：

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 之前，我使用相同的场景进行了测试，同一个码头服务器使用正确的 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>

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

【问题讨论】：

看起来像 Wicket URL 渲染器问题。 'com.alcatel_lucent.nms8770.awol.client.web.page.MetaprofileListPage' 是一个错误的 URL，因为 Wicket 1.5 默认 URL 以 'wicket/bookmarkable/ 开头，你必须再更改。可能看起来基本网址已定义或类似。尝试升级到最新的 Wicket 1.5.10。也尝试渲染完整的 URL。可能尝试将 base-url 标头元素设置为解决方法。

标签： jquery ajax jquery-mobile jetty wicket

【解决方案1】：

您可能应该将您的可收藏页面装载在一个简短的、众所周知的段下，例如

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

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

这至少会删除那些包名。

【讨论】：