Ember 两级导航 active-CSS 链接不起作用

Question

在阅读了很多关于 ember 中新嵌套路由的信息后，我的转换工作和插座被替换了。遗憾的是仍然存在一个问题：我有一个两级导航 --> 主导航和侧边栏。所有链接都是用 {{link-to}} 生成的。如果我单击侧边栏中的子项，则该项不会在 Chrome 中获得“活动”CSS 类（Firefox 可以）。如果我单击主导航中的相同链接，则侧栏中的链接不会被激活。

在这里你可以在“用户”下看到我的问题 --> http://jsbin.com/omAZiZe/1/edit （需要看普通桌面版导航才能看到侧边栏） “用户”和“用户 Übersicht”具有相同的链接，但只有一个处于活动状态。 Firefox 中也存在浏览器问题，侧边栏中的 Opera 子项激活。在 Chrome 中，这不起作用。我怎么解决这个问题？

这是我的版本：

Ember      : 1.1.3+pre.5a35fc76
Ember Data : 1.0.0-beta.4+canary.c15b8f80
Handlebars : 1.0.0
jQuery     : 1.10.2

和我的代码：

应用：

    App.Router.map(function(){
    this.resource("users",function() {
        this.route("user", {path: "users/:user_id"});
        this.route("new");
    });

    App.UsersIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("sidebar", {into: 'application' , outlet: "sidebar",  controller: "users.index"  });
        this.render("userslist", {outlet: "users", controller: "users.index"});
    },
    model: function() {
        return users;
    }
    });

    App.UsersUserRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("sidebar", {into: 'application' , outlet: "sidebar",  controller: "users.index"  });
        this.render("users/user", {outlet: "users", controller: "user"});
    },
    model: function() {
         return users[0];
    }
    });

    App.UsersNewRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("sidebar", {into: 'application' , outlet: "sidebar",  controller: "users.index"  });
        this.render("users/new", {outlet: "users", controller: "users"});
    },
    model: function() {

    }
    });
//spezieller Array Controller
App.UsersIndexController = Ember.ArrayController.extend({
     navigation: [
               {controller: "users.index", text: "User Übersicht" , hint: "Alle User als Liste", icon: "glyphicon glyphicon-user"},
               {controller: "users.new", text: "Neuen User anlegen" , hint: "Hier können neue User angelegt werden", icon: "glyphicon glyphicon-plus-sign"}
              ] 
});

索引.html

 <script type="text/x-handlebars" data-template-name ="users">
        {{outlet users}}
    </script>

    <script type="text/x-handlebars" data-template-name ="userslist">
        <div class="row">
          <div class="col-lg-12">
            <h1>Users</h1>

                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Username</th>
                                <th>Vorname</th>
                                <th>Nachname</th>
                                <th>E-Mail</th>
                                <th>Rolle</th>
                                <th></th>
                            </tr>
                        <thead>
                        <tbody>
                             {{#each}}
                             <tr>
                                <td>{{id}}</td>
                                <td>{{username}}</td>
                                <td>{{prename}}</td>
                                <td>{{surname}}</td>
                                <td>{{email}}</td>
                                <td>{{role}}</td>
                                <td> {{#link-to "users.user" this }}<span class="glyphicon glyphicon-pencil"></span>{{/link-to}} <span class="glyphicon glyphicon-trash"></span></td>
                            </tr>
                           {{/each}}

                        </tbody>
                    </table>      
                    {{outlet}}  
          </div>
        </div><!-- /.row -->
    </script>

<script type="text/x-handlebars" data-template-name="users/user">
    <div class="row">
      <div class="col-lg-12">
        <h1>User <small>{{username}}</small></h1>
            {{email}}

      </div>
    </div><!-- /.row -->
</script>

<script type="text/x-handlebars" data-template-name="sidebar">
    <ul class="nav navbar-nav side-nav">
    {{#each item in navigation}}
        <li> 
            {{#link-to item.controller}}
                {{#if item.icon}}
                    <span {{bind-attr class="item.icon"}} ></span>
                {{/if}}
                {{item.text}}
            {{/link-to}}
        </li>
    {{/each}}
    </ul> 
</script>

Answer 1

这种情况的解决方案是在 link-to 帮助程序上使用 currentWhen 参数。如果使用该参数，Ember 会比较当前活动的 route 名称，而不是链接到的 route 名称参数，而是它的 currentWhen 参数。如果存在匹配，则认为该链接处于活动状态。

上面的解释实际上是这样的：

{{#link-to "users.new" this currentWhen="users"}}New{{/link-to}}
{{#link-to "users.edit" this currentWhen="users"}}Edit{{/link-to}}
...

在示例中，users 路由将被视为在子路由 users.new、users.edit 等上处于活动状态。

希望对你有帮助。

Answer 2

实际上，您最初的问题是 css。您的侧边栏收到 active 类，但您的 ui 不会改变。

如果您添加以下内容，您将在激活时看到背景颜色为黑色的侧边栏项目：

.navbar-inverse .navbar-nav>li>a.active {
  background-color: #080808;
}

在此之后，您会注意到单击Neuen User anlegen 项目，Neuen User anlegen 和User Übersicht 都将具有活动类，并且两者都将具有黑色背景。这是预期的行为，因为Neuen User anlegen 链接有link-to "users"，所以当您点击Neuen User anlegen 时，您会转到“users.new”路线，如果您在“users.new”路线中，您也属于“用户”路线。所以只需将link-to "users" 更改为link-to "users.index"，在您的UsersIndexController 中：

App.UsersIndexController = Ember.ArrayController.extend({
     navigation: [
         {controller: "users.index", text: "User Übersicht" , hint: "Alle User als Liste", icon: "glyphicon glyphicon-user", },
         {controller: "users.new", text: "Neuen User anlegen" , hint: "Hier können neue User angelegt werden", icon: "glyphicon glyphicon-plus-sign"}
     ] 
});

这是更新后的 jsbin，使用 http://jsbin.com/omAZiZe/4/edit