emberjs : 根据当前路由添加 active css class 到 link

Question

我正在使用 Ember 1.8 版。有谁知道当用户在该路线中时如何自动突出显示菜单 link。请帮助。我看到很少有关于这样做的 Stack overflow 帖子。但它们看起来很旧，不适合我

我在车把模板中有以下菜单

    <ul class="nav navbar-nav">
                <li>
                {{#link-to 'posts'}}Posts{{/link-to}}
                </li>
                <li>
                {{#link-to 'comments'}}Comments{{/link-to}}
                </li>
            </ul>

router.js 长得像

   this.resource('post', { path: 'posts/:post_id'},function(){
            this.resource('comments', { path: '/comments' });

    });

Answer 1

Ember 自动将 active 的 class 添加到当前正在访问的路由。您可以定义 css 中的外观，例如：

.active {
  background: yellow;
}

剩下的就可以了...

查看工作演示 here

emberjs : 根据当前路由添加 active css class 到 link

emberjs : add active css class to link based on current route

ember.js