javascript - 如何覆盖 ajax=false 以便它切换到加载的 dom 页面(如果存在)

Question

我有几个项目 html，每个都包含一个 JQM 页面。我也有一个索引页。它是一个多 JQM 页面的 html，每个 JQM 页面作为一个类别列出项目。

  index.html                  item1.html           item2.html
  +------------------+        +--------+--------+  +--------
  |+-------+         |     +--|Cat.    |    Next|->|Cat.
  ||.cont- |         |     |  +--------+--------+  |--------
  ||ent    |+-------+|<----+  |                 |  |
  |+-------+|#cat1  ||        |                 |  |
  |         |       ||        |bla bla bla      |  |bla bla
  |         |link1+---------->|                 |  |
  |         |link2  ||        |                 |  |
  |         +-------+|        +-----------------+  +--------
  |+-------++-------+|
  ||#cat2  ||#cat3  ||
  ||       ||       ||
  ||link4  ||link3  ||
  ||       ||       ||
  |+-------++-------+|
  +------------------+

目前我可以通过平滑的ajax加载从索引链接到项目。但是我意识到，如果我想从项目链接回 index#cat1，我需要使用 data-ajax='false' 因为索引是一个多页 html。 (我不能使用 data-rel='back' 因为上一页并不总是 index.html)。

如果我使用 ajax='false'，如果我经常在列表和项目之间切换(每次切换回列表都是完全重新加载)，我会失去平滑过渡。例如:

-full-load-> index#cat1 -ajax-load-> item2 -full-load(again)-> 索引#cat1

问题

我要:

-full-load-> index#cat1 -ajax-load-> item2 -ajax-switch-to-already-loaded-> 索引#cat1

我如何覆盖 jquery 移动逻辑，以便在单击 data-ajax='false' 链接时，它首先搜索以查看该 index#cat1 页面是否已在 dom 中？如果是，则只需切换到该 JQM 页面。如果它不存在，则在没有 ajax 的情况下完全加载 index#cat1(就像默认行为一样)。

请记住，用户可以从 item1.html 开始并导航到 index.html#cat1。

我知道我需要用一些自定义属性标记每个 JQM 页面，例如 data-full-url="index.html#cat1" 以便更轻松地搜索现有页面。然而，我的主要弱点是如何更改现有的 Jquery Mobile 链接逻辑。

Answer 1

我在跟随 fiddle 的过程中创造了你的处境。

1) 索引页:http://jsfiddle.net/nachiket/RpZW7/
2)详情页:http://jsfiddle.net/nachiket/cHmhW/ (这个已经在索引页 fiddle 中链接了)

我没用过data-ajax='false'，它能解决你的问题吗？如果没有，请根据您的具体情况更新此 fiddle ，以便更好地提供帮助。