如何在EmberJS中为多个不同的路由设置链接'active'

Question

我想在Ember link-to helper上为多个路由设置'active'类,其中路由不是嵌套的.即.如果我有一个指向route1的链接,我希望它在当前路由为route1或route2时处于活动状态.

就像是:

{{#link-to 'route1' currentWhen="route1, route2"}}Things-N-Stuff{{/link-to}}

我的下一个理想方案是在路由处于活动状态时设置(或查找)布尔值,然后执行以下操作:

{{#link-to 'route1' class="isRoute1:active isRoute2:active"}}Not-as-good{{/link-to}}

但我宁愿免费拿起它.也许有一个默认的isRoutename布尔值尚未在文档中......？

---

还没有答案.我最终这样做了:

{{#linkTo "things" tagName="li" href=false}}
    <a {{bindAttr href="view.href"}} {{bindAttr class="isThingsLinkActive:active"}}>Things</a>
{{/linkTo}}

然后在App.ApplicaitonController中

isThingsLinkActive: function(){
    return ['things.index','thing.index','stuff.index'].contains( this.get('currentPath') );
}.property('currentPath'),

这意味着我需要在我的app控制器中为每个"重载"链接提供类似的东西.使用ember生成的默认标志/属性在模板中完全捕获它会不会更清晰？我愿意接受一个更优雅的解决方案......任何人？

Answer 1

根据链接到 #active 文档,您可以使用空格分隔的"currentWhen"来完成此操作,但这需要Ember 1.8.

{{#link-to 'route1' currentWhen="route1 route2"}}Things-N-Stuff{{/link-to}}

这也可能是您可以在早期版本中启用的功能:

请参阅https://github.com/emberjs/ember.js/blob/master/FEATURES.md上的'ember-routing-multi-current-when'

或者,您可以使用此SO帖子中描述的方法之一覆盖链接到帮助程序:

有没有办法在EmberJS中将数组传递给currentWhen？

Answer 2

目前从3.2开始，正确的语法是：

{{#link-to 'fruits.index' current-when="fruits.index apples.index"}}Link text{{/link-to}}

抱歉，尝试编辑原始答案，但更改少于 6 个字符。