ember.js - Ember js:渲染嵌套导航侧栏以及主 View

我有一个页面布局布局，如下所示:
左侧有一个嵌套的导航。在这种情况下，它将显示:

库列表(l1，l2，l3)。当前选择l1

库(1)中存在的书籍列表(b1，b2)

书

中包含的页面列表(p1，p2，p3)

如果选择了图书馆，则图书馆中用于显示书籍的列将自动更新。选择一本书时，页面列将自动更新为该书中的所有页面，等等。

除此之外，还有一个主 View ，该 View 显示当前所选实体的其他详细信息。在这种情况下，第2页(p2):

 ________________________________
|*l1 | b1 | p1 |                 |
|----|----|----|                 |
| l2 |*b2 |*p2 |  Main View      |
|----|----|----|  (p2 details)   |
| l3 |    | p3 |                 |
 --------------------------------

当仅选择一个库时，这是一个附加 View 。它在侧栏中显示所选的库，该库中的所有书籍以及主 View 中有关该库的详细信息。

 ________________________________
|*l1 | b1 |                      |
|----|----|                      |
| l2 | b2 |       Main View      |
|----|----|       (l1 details)   |
| l3 |    |                      |
 --------------------------------

或仅选择一本书时:

 ________________________________
|*l1 | b1 | p1 |                 |
|----|----|----|                 |
| l2 |*b2 | p2 |  Main View      |
|----|----|----|  (b2 details)   |
| l3 |    | p3 |                 |
 --------------------------------

因此，例如，当选择一个库时，主要有两个作业:

显示库中的所有书籍(导航)

显示有关所选库的详细信息(主)

通过以下方式使用嵌套路线时，导航本身可以正常工作:

Router.map(function() {
  this.resource('libraries', { path: '/libraries' }, function() {
    this.resource('books', { path: ':library'}, function() {
      this.resource('pages', { path: ':book'});
    });
  });
});

在页面路线中，我只获取所选图书馆的所有书籍，并将其呈现到侧边栏出口中:

export default Ember.Route.extend({
  model: function (params) {
    return this.store.find('book', {song: params.library});
  },
  renderTemplate: function() {
    this.render({ outlet: 'sidebar-books' });
  }
});

但是，到目前为止，在尝试将有关当前选定的库，书籍或页面的详细信息呈现到主 View 以及侧边栏 View 时，我还是很困惑。

我发现可以在render函数中添加一个附加的renderTemplate调用，这使我可以将其他内容呈现到主 View ，但是我无法弄清楚如何从商店中检索要显示的实体，因为还有其他路由不会打来的

推荐为什么做这样的事情？

最佳答案

带有动态菜单的侧面导航
使用嵌套路线呈现更接近codeySmurf描述的侧边菜单导航的示例，尽管加载多个模型的主要问题尚未解决，但codeySmurf已解决。

http://emberjs.jsbin.com/begewoza/1/edit

带有静态菜单的侧面导航

用于呈现边栏菜单和内容的方法可能类似于以下内容。假定不需要在主 View 区域中将父模型与子模型一起呈现(例如，在book1下方的顶部和该page1的下方同时显示lib1)，并且可以在模板中定义菜单，因此不嵌套资源已被使用。尽管也可以使用render(命名为奥特莱斯示例http://emberjs.jsbin.com/nibikufa/1/edit)来使用named outlets帮助器呈现菜单。

http://emberjs.jsbin.com/hituxado/1/edit

js

App = Ember.Application.create();

App.Router.map(function() {
  this.route("allLibraries",{path:"/libraries"});
  this.resource("library",{path:"/libraries/:library"});
  this.resource("book",{path:"/libraries/:library/books/:book"});
  this.resource("page",{path:"/libraries/:library/books/:book/pages/:page"});
});


App.IndexRoute = Ember.Route.extend({
  redirect:function(){this.transitionTo("allLibraries");}
});

App.LibraryRoute = Ember.Route.extend({
  model:function(params){
    return {libId:params.library};
  }
});

App.BookRoute = Ember.Route.extend({
  model:function(params){
    return {libId:params.library,bookId:params.book};
  }
});

App.PageRoute = Ember.Route.extend({
  model:function(params){
    return {libId:params.library,bookId:params.book,pageId:params.page};
  }
});

App.MenuView = Ember.View.extend({

});

hbs

<script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>
    <div style="float:left">{{render "menu"}}</div>
    <div style="float:left;margin-left:30%">{{outlet}}</div>
  </script>

  <script type="text/x-handlebars" data-template-name="allLibraries">
all libs
  </script>
  <script type="text/x-handlebars" data-template-name="library">
the library {{libId}}
  </script>
  <script type="text/x-handlebars" data-template-name="book">
the book {{libId}} - {{bookId}}
  </script>
  <script type="text/x-handlebars" data-template-name="page">
the page {{libId}} - {{bookId}} - {{pageId}}
  </script>

  <script type="text/x-handlebars" data-template-name="menu">
{{#link-to "allLibraries"}}all libs{{/link-to}}
<br/>
{{#link-to "library" 1}}lib 1
<br/>
{{#link-to "book" 1 1}}book 1
<br/>
{{#link-to "page" 1 1 1}}page1{{/link-to}}
{{/link-to}}
<br/>
{{#link-to "book" 1 2}}book 2
<br/>
{{#link-to "page" 1 2 2}}page2{{/link-to}}
{{/link-to}}

{{/link-to}}
<br/><br/>
{{#link-to "library" 2}}lib 2
<br/>
{{#link-to "book" 2 2}}book 2
<br/>
{{#link-to "page" 2 2 2}}page2 2{{/link-to}}
{{/link-to}}
{{/link-to}}



  </script>

css

a.active{
  background-color:lightgrey;
  border-radius:4px;
  margin:8px;
  padding:4px;
}

关于ember.js - Ember js:渲染嵌套导航侧栏以及主 View ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24469743/