jQuery 移动导航答案

【问题标题】：jQuery Mobile navigatonjQuery 移动导航
【发布时间】：2011-05-09 20:40:55
【问题描述】：

我正在尝试使用 jQuery Mobile 创建我的视图的移动版本，但它没有像预期的那样工作。

我有两个页面 - a.html 有一个 jQuery Mobile 页面（div 和 data-role="page"）和一个指向 b.html 的链接，其中有几个 jQuery Mobile 页面。现在，如果我在浏览器中加载 a.html，我可以转到 b.html 并显示主“页面”，但是 b.html 中引用 b.html 中其他“页面”div 的任何链接都会失败（这是哈希与href 的链接如#otherpage）。如果我直接访问 b.html，所有链接都可以正常工作。

是否可以在 b.html 中提供多个“页面”div 而不会破坏导航控件？

我正在使用最新的 jQuery Mobile 1.0 alpha 4.1。

更新

我使用的框架是 Ruby on Rails。

我的移动布局的一部分：

<div data-role="page">
  <div data-role="content">
    <%= yield %>
  </div>
</div>
<%= yield :pages %>

页面 a.html - 这是 Rails 脚手架的索引操作：

<ul data-role="listview">
  <% @tv_series.each do |tv_series| %>
    <li><%= link_to tv_series.title, tv_series %></li>
  <% end %>
</ul>

页面 b.html - 这是同一个 Rails 脚手架的显示操作：

<ul data-role="listview">
  <% @seasons.each do |season| %>
    <li>
      <!-- this are the links that work only if base page was b.html -->
      <a href="#season<%= season.id %>">Season <%= season.number %></a>
    </li>

    <%= render :partial => 'seasons/season.html.erb',
      :locals => { :season => season } %>

  <% end %>
</ul>

季节部分生成一个新的页面div：

<% content_for :pages do %>
  <div data-role="page" id="season<%= season.id %>">
    <div data-role="content">
      whatever
    </div>
  </div>
<% end %>

现在我得到的错误是：如果我去脚手架索引 (/tv_series) 并选择一个项目，我会去显示带有 URL /tv_series#/tv_series/:id 的页面 - 我在这个页面上得到的链接看起来像 /tv_series/tv_series/:id#season134 这是显然是错误的，jQuery Mobile 尝试 AJAX 请求并因找不到页面而失败。如果我手动转到/tv_series/:id，所有链接看起来都很好（/tv_series/:id#season134）。

【问题讨论】：

由于 jQuery mobile 在您浏览网站时构建了自己的由单个“页面”组成的巨型 dom，如果您尝试访问自己的“页面”时它吓坏了，我不会感到惊讶分区。我没有任何信息可以支持这一点，因此发表了评论。您是否尝试过将页面 div 转换为单独的页面？无论如何，这应该不难测试，并且在一天结束时基本上是相同的结果。
代码会有所帮助，调试器会说什么？有什么错误吗？
revdrjrr - 每个 div 的单独页面需要创建许多新的控制器操作和路由，我希望保持与桌面版本相同。 Phill Pafford - 它会混淆并产生一些奇怪的路径，会用一些代码和结果更新问题。

标签： jquery mobile navigation jquery-mobile

【解决方案1】：

我终于在 jQuery Mobile 1.0 alpha 4.1 文档中找到了答案：

请务必注意，如果您从通过 Ajax 加载的移动页面链接到包含多个内部页面的页面，则需要在链接中添加 rel="external" 或 data-ajax="false" .这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。这一点很关键，因为 Ajax 页面使用哈希 (#) 来跟踪 Ajax 历史，而多个内部页面使用哈希来指示内部页面，因此这两种模式之间的哈希会发生冲突。

因此，使用当前的导航系统是不可能的。

【讨论】：