1

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

这里你可以在“Users”下看到我的问题--> http://jsbin.com/omAZiZe/1/edit （你需要看到普通桌面版的导航才能看到侧边栏）“Users”和“User Ü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>
4

2 回答 2

2

这种情况的解决方案是使用助手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依此类推。

希望能帮助到你。

于 2013-11-12T08:19:31.583 回答
0

实际上，您最初的问题是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”路由，你也在“users”路由。因此，只需将您的,更改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

于 2013-11-13T01:12:31.527 回答