1

我正在使用 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>
4

2 回答 2

0

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

于 2012-12-12T15:34:03.003 回答
0

You will really need to take a look at rewriting how and where you call your animations in the jqm structure.

pagebeforechange, pagebeforeload, pagebeforecreate, etc.. If you have shut off the ajax you are disabling alot of this functionality. I don't think you are going to find a singular answer that will solve your problem outright. We struggled with it as well and finally had to find a compromise and a lot of testing to find the right combination of usage with our templating structures (pure.js).

于 2012-12-12T16:27:52.440 回答