Question

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

我有两个页面--a.html有一个jQuery Mobile页面（div带data-role="page"）和一个指向b.html的链接，其中有几个jQuery Mobile页面。现在，如果我在浏览器中加载a.html，我可以转到b.html并显示主“页面”，但b.html中引用b.html内其他“page”div的任何链接都将失败（这是哈希与href的{{1}}相关联的链接。如果我直接进入b.html，所有链接都可以正常运行。

是否可以在不破坏导航控件的情况下在b.html中提供多个“page”div？

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

更新

我正在使用的框架是Ruby on Rails。

我的移动布局的一部分：

#otherpage

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

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

Page b.html - 这是同一个Rails脚手架的show动作：

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

季节部分生成新页面div：

<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>

现在我得到的错误：如果我去脚手架索引（<% content_for :pages do %> <div data-role="page" id="season<%= season.id %>"> <div data-role="content"> whatever </div> </div> <% end %>）并选择一个项目，我会转到显示网址/tv_series的页面 - 我在此页面上看到的链接看起来像{ {1}}这显然是错误的，jQuery Mobile尝试了一个AJAX请求，并在找不到页面时失败。如果我手动转到/tv_series#/tv_series/:id，则所有链接都可以正常显示（/tv_series/tv_series/:id#season134）。

Answer 1

最后，我在jQuery Mobile 1.0 alpha 4.1文档中找到了答案：

重要的是要注意，如果您从通过Ajax加载的移动页面链接到包含多个内部页面的页面，则需要在链接中添加rel =“external”或data-ajax =“false” 。这告诉框架执行整页重新加载以清除URL中的Ajax哈希。这很重要，因为Ajax页面使用散列（＃）来跟踪Ajax历史记录，而多个内部页面使用散列来指示内部页面，因此这两种模式之间的散列会发生冲突。

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

jQuery移动导航

1 个答案: