CI'm在制作一条路线时遇到问题。我有项目的列表视图,单项html看起来像这样:
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-count ui-btn-up-c"><div class="ui-btn-inner ui-li"><div class="ui-btn-text">
<a href="#my_clients/1486" class="ui-link-inherit">
<h4 class="ui-li-heading">number/h4>
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">A</span>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>
我的路由器代码:
var AppRouter = Backbone.Router.extend({
routes:{
"": "login",
"login": "login",
"my_clients": "myClients",
"my_clients/:id": "myClientDetails"
},
initialize:function () {
// Handle back button throughout the application
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
},
login: function () {
this.changePage(new LoginView({ model: new User() }));
},
myClients: function() {
this.changePage(new MyClientsView({ model: new MyClientsCollection() }));
},
myClientDetails: function(id) {
var client = new Client({ id: id });
self = this;
client.fetch({
success: function(data) {
self.changePage(new MyClientDetailsView({ model: data }));
}
});
},
changePage:function (page) {
$(page.el).attr('data-role', 'page');
page.render();
$('body').append($(page.el));
var transition = $.mobile.defaultPageTransition;
// We don't want to slide the first page
if (this.firstPage) {
transition = 'none';
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash:false, transition: transition});
}
});
登录和MyClients页面工作正常,但是当我点击列表视图项目中的链接以显示单个客户端详细信息时,我看到在我的firebug控制台中调用并且路由无效。
我错过了什么?
答案 0 :(得分:2)
将<a href="#my_clients/1486"...>
更改为<a href="#/my_clients/1486"...>
(换句话说,在/
之后添加#
)。
请参阅示例:http://jsfiddle.net/theotheo/sz6y8/