Javascript jQuery移动页面转换不起作用_Javascript_Jquery_Model View Controller_Jquery Mobile_Handlebars.js

Javascript jQuery移动页面转换不起作用

javascript jquery model-view-controller jquery-mobile

Javascript jQuery移动页面转换不起作用,javascript,jquery,model-view-controller,jquery-mobile,handlebars.js,Javascript,Jquery,Model View Controller,Jquery Mobile,Handlebars.js,我正在使用Handlebar和jQuery Mobile实现一个自定义MVC结构。为了手动处理路由，我禁用了两个jQM参数： $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; 这两行代码禁用jQuery移动链接绑定和哈希侦听。在我想使用除淡入淡出之外的页面转换之前，一切似乎都很正常。当我重新启用链接绑定时，页面转换开始工作，但有趣的事情开始发生，例如页面的标题显示为{{page}}，因为jQM

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

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

这两行代码禁用jQuery移动链接绑定和哈希侦听。在我想使用除淡入淡出之外的页面转换之前，一切似乎都很正常。当我重新启用链接绑定时，页面转换开始工作，但有趣的事情开始发生，例如页面的标题显示为{{page}}，因为jQM在Handlebar编译之前将其从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>

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

你真的需要看看如何在jqm结构中重写你的动画以及在哪里调用动画

pagebeforechange、pagebeforeload、pagebeforecreate等。。如果您关闭了ajax，那么您将禁用很多此功能。我认为你不会找到一个能彻底解决你问题的单一答案。我们也与之斗争，最后不得不找到折衷方案和大量测试，以找到模板结构pure.js的正确用法组合。

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