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