将"活动"类分配给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和bootstrap药丸的工作示例:http://jsbin.com/ekobod/5/edit (需要ember-1.0.0-pre.4)

Answer 3

活动路径的路径在ApplicationControllervia中自动更新,currentPath所以我在我的App中做了类似的事情...在这样的ApplicationController附加属性中:

isProductsActive: function(){
  if ( this.get('currentPath') === 'products' ) return 'active';
  else return '';
}.property('currentPath')

在我的ApplicationView模板中:

<li {{bindAttr class="isProductsActive"}}>
  {{#linkTo "products"}}Products{{/linkTo}}
</li>

Answer 4

我做了一个ember-cli插件来处理这个问题:

https://github.com/alexspeller/ember-cli-active-link-wrapper