jQuery Mobile 页面转换不起作用答案

【问题标题】：jQuery Mobile page transitions aren't workingjQuery Mobile 页面转换不起作用
【发布时间】：2012-12-12 14:54:52
【问题描述】：

我正在使用 Handlebars 和 jQuery Mobile 实现自定义 MVC 结构。为了手动处理路由，我禁用了两个 jQM 参数：

$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;

这两行禁用 jQuery Mobile 链接绑定和哈希侦听。在我想使用fade 以外的页面转换之前，一切似乎都运行良好。当我重新启用链接绑定时，页面转换开始工作，但有趣的事情开始发生（例如，页面标题显示为 {{page}}，因为 jQM 在 Handlebars 编译之前将其从 HTML 中提取出来）。

有什么想法吗？

<!DOCTYPE html>
<html>
<head>
  <link href="/styles/jquery.mobile.css" rel="stylesheet" >
  <script src="/script/jquery.js" type="text/javascript"></script>
  <script src="/script/jquery.mobile.js" type="text/javascript"></script>
  <script src="/script/handlebars.js" type="text/javascript"></script>
</head>
<body>

<div id="one" data-role="page">
  <div data-role="header"><h1>{{page}}</h1></div>
  <div data-role="content">
    <p>
      {{content}}
      <a href="#two" data-role="button" data-transition="slide">Two</a>
    </p>
  </div>
</div>

<div id="two" data-role="page">
  <div data-role="header"><h1>{{page}}</h1></div>
  <div data-role="content">
    <p>
      {{content}}
      <a href="#one" data-role="button" data-transition="slide">One</a>
    </p>
  </div>
</div>

<script>
var count = 0;
function one() {
  return({page: 'One', content: 'One is the loneliest number.'});
}

function two() {
  return({page: 'Two', content: 'Two is company.'});
}

// Handle link binding and hash changes manually
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;

// Router
$(window).bind('load hashchange', function() {
  var hash = '#one';
  if (location.hash.length > 0) {
    hash = location.hash;
  }
  var source = $(hash).html();
  var template = Handlebars.compile(source);
  var html = template(window[hash.substring(1, hash.length)]());
  $(hash).html(html);
  $.mobile.changePage(hash);
});

</script>

</body>
</html>

【问题讨论】：

标签： javascript jquery model-view-controller jquery-mobile handlebars.js

【解决方案1】：

你真的需要看看如何重写你在 jqm 结构中调用动画的方式和位置。

pagebeforechange、pagebeforeload、pagebeforecreate 等。如果您关闭了 ajax，您将禁用很多此功能。我不认为你会找到一个单一的答案来彻底解决你的问题。我们也为此苦苦挣扎，最终不得不找到折衷方案并进行大量测试，以找到与我们的模板结构 (pure.js) 的正确组合。

【讨论】：

【解决方案2】：

Jquery 移动转换在本机应用中运行良好。使用插件会导致很多失真。如果你真的想要那个动画，我建议你不要使用任何插件。

【讨论】：

我真的不认为这是一个实用的答案。你是说如果你使用 jQuery Mobile 就不能使用任何 jQuery 插件？
你可以，但是过渡非常有问题。我尝试使用带有 phone gap/cordova 的插件，唯一有效的是在过渡之间向上滑动，看起来并不酷，所以我最终放手了，当我在没有 cordova 的情况下进行测试时，它起作用了。你可以尝试听 pagebeforeshow 和pagehide 并且没有固定的标题但使用插件调试很困难，因为您有其他模板来确定页面的呈现方式，这与原生应用程序不同，您知道自己做了什么并且可以轻松消除错误。