在Ember中激活单个{{link-to}}
在Ember中激活单个{{link-to}}
提问于 2016-03-22 13:51:45
在我的Ember应用程序中，我有带组的导航栏。每个唯一项目在栏中出现两次:在其自己的组中和在“所有项目”组中：
如果用户选择项3，则两个链接都将通过获取active CSS class而激活：
如何更改代码以使用户单击的链接变为活动状态？如果用户手动打开/item/3 URL，则第一个链接应该只处于活动状态。
到目前为止，我的代码如下：http://jsbin.com/yidofayoma/3/edit?html,js,output
var App = Ember.Application.create({
rootElement: '#app'
});
App.Router.map(function() {
this.route('item', { path: '/item/:item_id' });
});
App.ItemRoute = Ember.Route.extend({
model: function(params) {
return params.item_id;
}
});导航栏模板：
<ul>
<li>{{#link-to "index"}}Index{{/link-to}}</li>
<li>
All items
<ul>
<li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
<li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
</ul>
</li>
<li>
Group A
<ul>
<li>{{#link-to "item" 1}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3}}Item 3{{/link-to}}</li>
</ul>
</li>
<li>
Group B
<ul>
<li>{{#link-to "item" 4}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5}}Item 5{{/link-to}}</li>
</ul>
</li>
</ul>
<hr />
{{outlet}}Ember版本: 2.4.2
回答 2
Stack Overflow用户
发布于 2016-03-30 08:32:39
将group查询参数添加到物料工艺路线：
App.ItemRoute = Ember.Route.extend({
queryParams: {
group: {}
},
model: function(params) {
return params.item_id;
}
});接下来，将group查询参数添加到每个链接：
<ul>
<li>{{#link-to "index"}}Index{{/link-to}}</li>
<li>
All items
<ul>
<li>{{#link-to "item" 1 (query-params group="all")}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2 (query-params group="all")}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3 (query-params group="all")}}Item 3{{/link-to}}</li>
<li>{{#link-to "item" 4 (query-params group="all")}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5 (query-params group="all")}}Item 5{{/link-to}}</li>
</ul>
</li>
<li>
Group A
<ul>
<li>{{#link-to "item" 1 (query-params group="a")}}Item 1{{/link-to}}</li>
<li>{{#link-to "item" 2 (query-params group="a")}}Item 2{{/link-to}}</li>
<li>{{#link-to "item" 3 (query-params group="a")}}Item 3{{/link-to}}</li>
</ul>
</li>
<li>
Group B
<ul>
<li>{{#link-to "item" 4 (query-params group="b")}}Item 4{{/link-to}}</li>
<li>{{#link-to "item" 5 (query-params group="b")}}Item 5{{/link-to}}</li>
</ul>
</li>
</ul>这使得只有一个链路处于活动状态。缺点是在所有项目URL中都有一个额外的查询字符串参数，例如/item/5?group=all。
演示：http://jsbin.com/josogumaqo/edit?html,js,output
Stack Overflow用户
发布于 2016-03-30 21:51:47
首先，我想说这是一个非常有趣的问题，谢谢。
你可以按照@pavel-chuchuva建议的那样做，或者(为了避免额外的参数并使urls用户友好)为每个组创建一个单独的路由：
App.Router.map(function() {
this.route('all', { path: '/all/:item_id' });
this.route('a', { path: '/a/:item_id' });
this.route('b', { path: '/b/:item_id' });
});您可以创建混合，以避免相同代码的3个副本
var itemsRoute = Ember.Mixin.create({
model: function(params) {
/*return something useful*/
return params.item_id;
}
});并扩展来自该混合的所有、a和b路由：
App.AllRoute = Ember.Route.extend(itemsRoute, {});
App.ARoute = Ember.Route.extend(itemsRoute, {});
App.BRoute = Ember.Route.extend(itemsRoute, {});工作示例：http://jsbin.com/nibacogeye/edit?html,js,output
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36147071
复制相关文章
相似问题
腾讯云开发者
