在EmberJS的选定列表项中分配'活动'类
我有一个列表，我想自动设置一个项目为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() atIndex: function() {return true; }.property().volatile()不。 这让我觉得我做错了什么。
谢谢！
{{#link-to "dashboard" tagName="li" href=false}} <a {{bind-attr href="view.href"}}> Dashboard </a> {{/link-to}}
到目前为止，解决这个问题最简单的方法是利用linkTo帮助器的内置支持来设置呈现链接时的活动类。 AFAIK这还没有被logging在源代码之外：
执行： 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
要利用这个function，只需要调整你的CSS风格的基础上有一个活跃的类的链接，而不是li元素。 如果你真的需要风格的li你可以创build一个自定义的视图和助手，扩展Ember.LinkView和使用li但改变CSS会更容易。
—更新—-
既然我们都喜欢twitter引导， 只是改变CSS可能不是一个很好的select。 在这种情况下，以下将做的伎俩：
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') });
工作示例使用烬链接助手与引导药丸： http ：//jsbin.com/ekobod/5/edit（需要呃1.0.0-pre.4）
活动路由的path在ApplicationController通过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>
我做了一个ember-cli插件来处理这个问题：
https://github.com/alexspeller/ember-cli-active-link-wrapper
编辑 ：最后，我发现使用链接的ember.js使用激活类的引导李元素的最佳方式。
{{#linkTo "dives" tagName="li"}} <a {{bindAttr href="view.href"}}>Dives</a> {{/linkTo}}
————– 8 <————–
弃用：
我猜在Ember.js引入了linkTo助手的activeClass属性之前，以前的答案是相关的。 现在我会解决这个问题：
<ul class="nav"> <li >{{#linkTo "index" activeClass="active"}}Index{{/linkTo}}</li> <li >{{#linkTo "about" activeClass="active}}About{{/linkTo}}</li> <li >{{#linkTo "login" activeClass="active}}Login{{/linkTo}}</li> </ul>
Enber将在相关时自动添加课程。
如果我可以提出另一个只需要把手的解决scheme：
<li {{bind-attr class="view.innerLink.active:active"}}> {{#link-to "path" viewName="innerLink"}}Click{{/link-to}} </li>
这将LinkView对象设置为父视图的成员，这是您可以引用的活动属性。
我发现了一个非常简单的解决scheme，使用列表组中的链接项目（ http://getbootstrap.com/components/#list-group-linked ）。
<div class="list-group"> {{#each thing in list}} {{#link-to "details" thing.id tagName="a" href="view.href" class="list-group-item" {{thing.name}} {{/link-to}} {{/each}} </div>
适用于Bootstrap v3.1.1和Ember v1.7.0
只需将{{link-to}}嵌套在外部的tagName上即可。 我正在EmberJS 2.0上做这个。
{{#link-to "admin.websocket" tagName="li"}} {{#link-to "admin.websocket"}}WebSocket{{/link-to}} {{/link-to}}
如果你想在Ember中使用Bootstrap导航，那么你可以使用Bootstrap for Ember，它具有开箱即用的支持：
Github： https ： //github.com/ember-addons/bootstrap-for-ember演示： http : //ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs
很多这些答案已经过时了。 这里是一个Bootstrap和Ember 2.x更清洁（和DRY）版本：
{{#link-to "index" tagName="li" as |link|}} <a href="#" class="{{if link.active 'active'}}">Index Page</a> {{/link-to}}
我通过创build一个视图为每个项目和使用classNameBindings解决了类似的问题（我不得不说，我没有一个HTML列表，即<a>...</a>在我的应用程序，只是列表<div> ）。
这是它为我工作的方式：
在tasklist.handlebars我遍历我的自定义视图
{{#each tasks}} {{view App.TaskListItemView contentBinding="this"....}} {{/each}}
Ember将为每个项目插入一个视图（即<div> ）。
每个项目的视图类在task_list_item_view.js中定义为
App.TaskListItemView = Ember.View.extend({ controller: null, classNameBindings: ['isSelected', 'isClosed'], isClosed: function() { var content = this.get('content'); return content && !content.isOpen(new Date); }.property('controller.content.@each'), isSelected: function() { return (this.get('controller').isSelectedTask(this.get('content'))); }.property('controller.taskSelection.@each'), .... });
最后，视图的模板只是在tasklistitem.handlebars中呈现我的链接
<a {{action "selectTask" view.content target="view"}} rel="tooltip" {{bindAttr title="view.content.comment"}} class="taskListLink"> .... </a>
AFAIK你必须在property()调用中指定源数据，让烬宝知道何时（重新）评估属性。
希望有所帮助
我跟着去了
Ember.LinkView.reopen({ didInsertElement:function(){ if(this.$().hasClass('active')){ this.$().parent().addClass('active'); } }
}）;
我不想使用接受的答案，因为我想保持我的李元素作为普通的旧HTML。 可能有更好的方法来检查活动状态，但我无法访问正确的属性。
