ember の新しいネストされたルートについてよく読んだ後、トランジションが機能し、アウトレットが置き換えられました。悲しいことに、まだ問題があります。メイン ナビゲーションとサイドバーの 2 つのレベルのナビゲーションがあります。すべてのリンクは {{link-to}} で生成されます。サイドバーのサブアイテムをクリックすると、アイテムは Chrome で「アクティブな」CSS クラスを取得しません (Firefox は動作します)。メインのナビゲーションで同じリンクをクリックすると、サイドバーのリンクがアクティブになりません。
ここで、「ユーザー」の下で私の問題を確認できます --> http://jsbin.com/omAZiZe/1/edit (サイドバーを表示するには、ナビゲーションの通常のデスクトップ バージョンを表示する必要があります) 「ユーザー」および「ユーザー ユーバーシヒト」 " には同一のリンクがありますが、アクティブなのは 1 つだけです。また、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>