Question

在阅读了很多关于ember的新嵌套路径后，我的转换工作和插座被替换。遗憾的是还有一个问题：我有一个两级导航 - ＆gt;主导航和侧边栏。所有链接均使用{{link-to}}生成。如果我点击侧边栏中的子项目，则该项目无法获得Chrome中的“有效”CSS类（Firefox可以使用）。如果我单击主导航中的相同链接，则侧边栏中的链接不会被激活。

在这里，您可以在“用户”下看到我的问题 - ＆gt; 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"}
              ] 
});

的index.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

此方案的解决方案是使用currentWhen帮助程序上的link-to参数。如果使用该参数，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”路线，如果您在“用户”中.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"}
     ] 
});

这是使用此http://jsbin.com/omAZiZe/4/edit

的更新后的jsbin

Ember Two-Level Navigation active-CSS link-to not working

2 个答案: