Ember js: Render Nested Navigation Sidebar together with a main view

Question

I have a page whichs layout will look like the following: There is a nested navigation on the left side. In this case it displays:

• a list of libraries (l1, l2, l3). currently l1 is selected
• a list of books (b1, b2) present in the library (1)
• a list of pages (p1, p2, p3) contained in the book

In case a library is selected, the column for displaying the books in the library would automatically be updated. When selecting a book, the pages column would automatically be updated with all the pages in that book etc...

In addition to that there is a main view, which displays additional details for the currently selected entity. In this case page 2 (p2):

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

Here is an additional view when just a library is selected. It shows the selected library, all the books in that library in the sidebar and the details about the library in the main view.

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

or when just a book is selected:

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

So, there are mainly two jobs when for instance a library is selected:

• Display all the books in the library (navigation)
• Display details about the selected library (main)

The navigation on its own works fine when using nested routes the following way:

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

Within the pages route I just get all the books for the selected library and render it into the sidebar outlet:

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

However, by now I am stuck when trying to render the details about the currently selected library, book or page to the main view AND to the sidebar view.

I found that I can add an additional render call to the renderTemplate function, which lets me render additional content to the main view, however I can't figure out how to retrieve the entity I want to display from the store, as any additional routes won't get called.

What is the recommended why to do something like this?

Answer 1

After quite some try and error, loading two models within the same route and rendering both views with that models, seems to do the trick.

This is the books route.

routes/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');
  }
});

In the handlebar template I can now access the library via:

{{library.name}}

and iterate over the books via:

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

Answer 2

side navigation with dynamic menu Example of rendering a side menu navigation with nested routes closer to what codeySmurf described, although the main issue of loading multiple models has not been tuckled, it has been solved by codeySmurf.

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

side navigation with static menu

An approach for rendering a sidebar menu along with the content could be something like the following. It is assumed that it is not required to render the parent models along with the children in main view area (eg show the lib1 on top underneath book1 and below that page1 at the same time) and the menu can be defined in template so no nested resources have been used. The menu has been rendered by using the render helper, although named outlets could also be used (named outlets example 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;
}