我有一个使用 jquery mobile 和主干构建的移动应用程序。我正在尝试通过路由逻辑来相应地呈现我的视图,因此我开始简单并随着我的前进而增加复杂性。
html如下
<div id="main">
<li><a href="#test_me">Click Here to Test Me</a></li>
</div>
<div id="view-goes-here"></div>
<script type="text/template" id="actions-template">
<table cellspacing='0' cellpadding='0' border='1' >
<thead>
<tr>
<th>Id</th>
<th>Str</th>
</tr>
</thead>
<tbody>
<% _.each(action, function(c) { %>
<% var f = c.id, g = c.str; %>
<tr>
<td class="<%= f %>"><%= c.id %></td>
<td class="<%= g %>"><%= c.str %></td>
</tr>
<% }); %>
</tbody>
</table>
</script>
这是一个带有功能代码的 jsfiddle:http: //jsfiddle.net/horcle_buzz/4JGhZ/
我希望这样当我对“test_me”进行哈希更改时,“main”div 的内容(特别是带有文本“Click Here to Test Me”的 url)会消失,只有我的视图的输出被渲染在输出中,特别是函数测试中我的变量 c 的表内容:
var c = [
{ id: 1, str: 'This'},
{ id: 2, str: 'is'},
{ id: 3, str: 'a'},
{ id: 4, str: 'test!'}
];
我的看法如下:
var ActionView = Backbone.View.extend({
template: ActionTemplate,
events:{
"click":"makeInput"
},
render:function(){
alert("a" + JSON.stringify(this.collection));
alert("b" + this.collection.toJSON());
$(this.el).html(this.template({
action: this.collection.toJSON()
}));
$('#view-goes-here').append(this.el);
return this;
},
makeInput:function(){
alert("im in");
}
});
我的猜测是我必须为我的 div 使用 data-role=page 标签,但是当我这样做时,视图不会按预期呈现。我对如何获得所需的输出有点困惑,特别是因为那里的大多数示例都相当基本。
我按如下方式禁用 jQuery Mobile 路由,然后启动 Backbone 历史记录:
$(document).ready(function(){
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
var router = new ActionsRoute();
Backbone.history.start();
});
路由完成如下:
var ActionsRoute = Backbone.Router.extend({
routes: {
'': 'main',
'test_me': 'loader'
},
main: function() {
$.mobile.changePage( "#main" , { reverse: false, changeHash: false } );
},
loader: function() {
test(function(c, Actions, ActionView){
alert("Data:" + JSON.stringify(c));
var actions = new Actions(c);
var actionView = new ActionView({collection:actions});
actionView.render();
});
}
});
提前致谢!