Question

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

库列表（l1，l2，l3）。目前已选择l1
图书馆（1）
书中包含的页面列表（p1，p2，p3）

如果选择了库，则会自动更新用于在库中显示书籍的列。选择一本书时，页面栏会自动更新该书中的所有页面等...

除此之外，还有一个主视图，显示当前所选实体的其他详细信息。在这种情况下，第2页（第2页）：

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

这是仅选择库时的附加视图。它显示了选定的库，侧栏中该库中的所有书籍以及主视图中有关库的详细信息。

 ________________________________
|*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' });
  }
});

但是，到目前为止，当我尝试将有关当前所选库，书籍或页面的详细信息呈现到主视图和侧边栏视图时，我感到困惑。

我发现我可以向render函数添加额外的renderTemplate调用，这样我就可以向主视图呈现其他内容，但是我无法弄清楚如何检索我希望从商店中显示实体，因为任何其他路线都不会被调用。

建议为什么要做这样的事情？

Answer 1

经过一番尝试和错误，在同一路线中加载两个模型并使用该模型渲染两个视图，似乎可以解决问题。

这是书籍路线。

路由/ books.js：

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

在车把模板中，我现在可以通过以下方式访问库：

{{library.name}}

通过以下方式遍历书籍：

{{#each books}}
  <div class="book">
    <div>{{title}}</div>
  </div>
{{/each}}

Answer 2

动态菜单的侧面导航 使用嵌套路径渲染侧边菜单导航的示例更接近于codeySmurf描述的内容，虽然加载多个模型的主要问题尚未解决，但它已由codeySmurf解决。

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

使用静态菜单进行侧面导航

将侧边栏菜单与内容一起呈现的方法可能如下所示。假设不需要在主视图区域中将父模型与子项一起呈现（例如，同时在book1下面和该页面下面显示lib1），并且可以在模板中定义菜单，因此不能嵌套资源已被使用。该菜单已使用render帮助程序呈现，但也可以使用named outlets（名为outlet http://emberjs.jsbin.com/nibikufa/1/edit}。

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：将嵌套导航边栏与主视图一起渲染

2 个答案: