为EmberJS中的选定列表项分配“活动”类 [英] Assigning 'active' class to selected list item in EmberJS

问题描述

我有一个列表，我想自动设置一个项目为class =active。给定以下引导代码：

I have a list and I'd like to set one item as class="active" automatically. Given the following bootstrap code:

<ul class="nav">
<li {{bindAttr class="atIndex:active"}}>{{#linkTo "index"}}Index{{/linkTo}}</li>
<li {{bindAttr class="atAbout:active"}}>{{#linkTo "about"}}About{{/linkTo}}</li>
<li {{bindAttr class="atLogin:active"}}>{{#linkTo "login"}}Login{{/linkTo}}</li>
</ul>

atIndex，atAbout和atLogin位于我的ApplicationController中。

atIndex, atAbout and atLogin reside in my ApplicationController.

要呈现为：

<ul class="nav">
<li class="active"><a...>Index{{/linkTo}}</li>
<li><a...>About<a></li>
<li><a...>Login<a></li>
</ul>

使用Ember 1.0 pre4，最好的方法是什么？我不想在每个视图或控制器中添加特殊的代码。

What's the best way to do this with Ember 1.0 pre4? I'd rather not add special code to every view or controller.

PS - atIndex：true atIndex：function（）{return true; } .property（）。volatile（）不。这使我觉得我做错了。

PS - atIndex: true works, but atIndex: function() {return true; }.property().volatile() does not. Which makes me think I'm doing something wrong.

谢谢！

推荐答案

{{#link-to "dashboard" tagName="li" href=false}}
  <a {{bind-attr href="view.href"}}>
    Dashboard
  </a>
{{/link-to}}

这篇关于为EmberJS中的选定列表项分配“活动”类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！