将“活动”类分配给 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 执行此操作的最佳方法是什么？我宁愿不要为每个视图或控制器添加特殊代码。

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}}

Answer 2

到目前为止，解决这个问题的最简洁的方法是利用 linkTo 助手的内置支持，在呈现链接时设置活动类。 AFAIK 除了源代码之外还没有记录：

实现：https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L46

例如：https://github.com/emberjs/ember.js/blob/master/packages/ember/tests/helpers/link_to_test.js#L120

要利用此功能，只需根据链接上的活动类而不是 li 元素将 CSS 调整为样式。如果您确实需要设置li 的样式，您可以创建一个自定义视图和帮助程序，扩展Ember.LinkView 并使用li，但更改css 会容易得多。

--- 更新 ----

因为我们都喜欢 twitter bootstrap仅仅改变 css 可能不是一个很好的选择。在这种情况下，以下方法可以解决问题：

App.ApplicationView = Ember.View.extend({
  currentPathDidChange: function() {
    Ember.run.next( this, function() {
      this.$("ul.nav li:has(>a.active)").addClass('active');
      this.$("ul.nav li:not(:has(>a.active))").removeClass('active');
    });
  }.observes('controller.currentPath')
});

使用 ember linkTo helper with bootstrap pills 的工作示例：http://jsbin.com/ekobod/5/edit（需要 ember-1.0.0-pre.4）