ember.js - 将 'active' 类分配给 EmberJS 中选定的列表项

Question

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

<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 中。

渲染为:

<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 执行此操作的最佳方法是什么？我不想向每个 View 或 Controller 添加特殊代码。

PS - atIndex: true 有效，但是 atIndex: function() {return true; }.property().volatile() 没有。这让我觉得我做错了什么。

谢谢!

Answer 1

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