我正在使用 Handlebars 和 jQuery Mobile 实现自定义 MVC 结构。为了手动处理路由，我禁用了两个 jQM 参数:
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
这两行禁用 jQuery Mobile 链接绑定(bind)和哈希监听。一切似乎都工作正常，直到我想使用 fade 之外的页面转换。当我重新启用链接绑定(bind)时，页面转换开始工作，但有趣的事情开始发生(例如，页面标题显示为 {{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>
最佳答案
您确实需要考虑重写在 jqm 结构中调用动画的方式和位置。
pagebeforechange、pagebeforeload、pagebeforecreate 等。如果您关闭了 ajax，则您将禁用很多此功能。我认为您不会找到能够彻底解决您问题的单一答案。我们也为此苦苦挣扎，最终不得不找到一个折衷方案并进行大量测试，以找到与我们的模板结构 (pure.js) 的正确使用组合。
关于javascript - jQuery Mobile 页面转换不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13842353/