[英]Relative links and backbone.js router
I'm using the router function in backbone.js and came across this problem. 我在骨干网.js中使用了路由器功能,并遇到了这个问题。 This may be a trivial thing, but I cant seem to figure this out nor find anything on Google.
这可能是一件微不足道的事情,但我似乎无法弄清楚这一点,也无法在Google上找到任何东西。
Problem: On the page http://www.mydomain.com/user/1
there is a link. 问题:
http://www.mydomain.com/user/1
: //www.mydomain.com/user/1页面上有一个链接。 This link should link to http://www.mydomain.com/user/1/profile
. 该链接应链接到
http://www.mydomain.com/user/1/profile
。
Of course if I use <a href="1/profile">
I get what I am looking for, but 1
is a dynamically generated value. 当然,如果我使用
<a href="1/profile">
我会得到想要的东西,但是1
是动态生成的值。 How then should my router define the routes? 那我的路由器应该如何定义路由? I believe its not a wise choice to hardcode the number
1
into the routes. 我认为将数字
1
硬编码到路由中不是明智的选择。
//Router
var AppRouter = Backbone.Router.extend({
routes: {
'': 'profile',
'profile': 'profile'
},
profile: function() {
}
});
var app = new AppRouter();
Backbone.history.start();
When I set the href
attribute of the a
tag like <a href="profile">
, the link that results is http://www.mydomain.com/user/profile
. 当我设置
<a href="profile">
之类a
标记的href
属性时,结果链接为http://www.mydomain.com/user/profile
。
For <a href="./profile">
I get http://www.mydomain.com/user/profile
. 对于
<a href="./profile">
我获得了http://www.mydomain.com/user/profile
。
For <a href="/profile">
I get http://www.mydomain.com/profile
. 对于
<a href="/profile">
我获得http://www.mydomain.com/profile
。
For <a href="profile/">
I get http://www.mydomain.com/profile/
. 对于
<a href="profile/">
我得到http://www.mydomain.com/profile/
。
Why is the 1
missing, and how can I keep it to achieve what I want? 为什么缺少
1
,我如何保持它来实现我想要的?
You can't define this dynamic URLs directly in the HTML, you have to create them into your Views. 您不能直接在HTML中定义此动态URL,必须在视图中创建它们。
For example: 例如:
template: 模板:
<script type="text/template" id="template-element">
<h1><%= title %></h1>
<a class="profile" href="<%= url_profile %>">profile</a>
</script>
js code: js代码:
// code simplified and no tested
var Element = Backbone.Model.extend({
initialize: function(){
this.set( "url_profile", this.url() + "/profile" );
}
});
var ElementView = Backbone.View.extend({
template: _.template( $("#template-element").html() ),
render: function(){
this.$el.html( this.template( this.model.toJSON() ) );
return this;
}
});
Or, as I do sometimes when I feel in the way: 或者,就像我有时感觉到的那样:
template: 模板:
<script type="text/template" id="template-element">
<h1><%= title %></h1>
<a class="profile" href="#replace_with_real_url">profile</a>
</script>
js code: js代码:
// no Element.url_profile attribute needed:
var ElementView = Backbone.View.extend({
template: _.template( $("#template-element").html() ),
render: function(){
this.$el.html( this.template( this.model.toJSON() ) );
this.$el.find( ".profile" ).attr( "href", "/user/" + this.model.id + "/profile" );
return this;
}
});
正如您在http://backbonejs.org/#Router中看到的那样,您可以在路由中使用参数,例如'/user/:id/profile'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.