[英]backbone.js router Pushstates & Root
I have a page http://www.domain.com/user/123
, where 123
is the user_id for a particular user. 我有一个页面
http://www.domain.com/user/123
,其中123
是特定用户的user_id。 There is a tabbed interface, and clicking on the tab should update the address bar with a new URL. 有一个选项卡式的界面,单击选项卡上的应该使用新的URL更新地址栏。
Example: Clicking on <a href="likes" data-toggle="tab">Likes</a>
should update the address bar to http://www.domain.com/user/123/likes
示例:点击
<a href="likes" data-toggle="tab">Likes</a>
地址栏更新为http://www.domain.com/user/123/likes
Problem: I am trying to implement pushstates in backbone.js, but I can't seem to get the URL right when using app.navigate()
. 问题:我正在尝试在ribs.js中实现推送状态,但是使用
app.navigate()
时似乎无法正确获取URL。 I tried setting the root
attribute in the router using Backbone.history.start({ pushState: true, root: "/user/" });
我尝试使用
Backbone.history.start({ pushState: true, root: "/user/" });
在路由器中设置root
属性Backbone.history.start({ pushState: true, root: "/user/" });
which gives me the root as http://www.domain.com/user/
. 这使我的根为
http://www.domain.com/user/
。 How can I add the user_id to the end of root
? 如何将user_id添加到
root
的末尾? ie. 即。
http://www.domain.com/user/123/
//Router
var AppRouter = Backbone.Router.extend({
routes: {
'': 'likes',
'likes': 'likes',
},
likes: function() {
console.log('fn likes');
$('#tab_likes"').show();
}
});
var app = new AppRouter();
Backbone.history.start({ pushState: true, root: "/user/" });
$(function() {
// Update address bar URL
$('a[data-toggle="tab"]').on('click', function(e) {
app.navigate(e.target.getAttribute('href'));
});
});
How can I update the root
attribute of Backbone.history
after grabbing the user_id
from the url? 从网址中获取
user_id
后,如何更新Backbone.history
的root
属性? The current method shown below does not work 下面显示的当前方法不起作用
// Router
var AppRouter = Backbone.Router.extend({
routes: {
':user_id/likes': 'likes',
':user_id/': 'likes'
},
set_user_id: function($user_id) {
this.user_id = $user_id;
// ADD SOME CODE TO CHANGE Backbone.history's root attribute
},
likes: function($user_id) {
console.log('fn likes');
this.set_user_id($user_id);
$('#tab_likes"').show();
}
});
var app = new AppRouter();
Backbone.history.start({
pushState: true,
root: '/user/' + app.user_id + '/' // app.user_id is undefined at the time this is called
});
You need to create your routes with a parameter to capture the variable user id, ie 您需要使用参数创建路由以捕获变量用户ID,即
var AppRouter = Backbone.Router.extend({
routes: {
':user/likes': 'likes',
},
likes: function(user) {
console.log(user, 'fn likes');
$('#tab_likes"').show();
}
});
See the Backbone docs for more info. 有关更多信息,请参见骨干文档 。 Needless to say that your
href
should be changed accordingly, ie href="123/likes"
. 不用说,您的
href
应该相应地更改,即href="123/likes"
。
Finally, in order to not only save the url in history but also trigger the route you need to navigate as such: 最后,为了不仅将网址保存在历史记录中,而且还触发了您需要这样导航的路线:
app.navigate(e.target.getAttribute('href'), true);
navigate
requires a trigger
option to be set if you want it to actually fire the route handler (as opposed to just update the URL). navigate
需要设置trigger
选项,如果您希望它实际触发路由处理程序(而不是仅更新URL)。 From the documentation : 从文档中 :
Whenever you reach a point in your application that you'd like to save as a URL, call navigate in order to update the URL.
每当您在应用程序中到达要另存为URL的位置时,请调用Navigation以更新URL。 If you wish to also call the route function, set the trigger option to true.
如果您还希望调用路由功能,请将触发选项设置为true。
So, to get the console.log
debug to at least work, try this: 因此,
console.log
调试至少可以正常工作,请尝试以下操作:
app.navigate(e.target.getAttribute('href'), true);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.