Named outlets and pods


#1

I’m converting my new application over to the pods scheme to follow the best practices guides here ( https://gist.github.com/samselikoff/1d7300ce59d216fdaf97 ) . I ran into a problem where i can’t determine the correct way to name my named outlet template so it will be picked up. I found this stack overflow question but the person never answered the question, instead they gave a different way of doing it. http://stackoverflow.com/questions/28050849/how-to-render-two-pods-content-on-the-same-page

I have this structure in pods

pods
|_ portal
    |_ page
       |_ route.js
       |_ template.hbs
       |_ tool-bar.hbs

Here is my code in the route.js

export default Ember.Route.extend({
    renderTemplate: function(){
        // Render the default template into the outlet
        this.render();
        // Render the tool-bar
        this.render('page.tool-bar', { outlet: 'tool-bar' });
    }
});

But it doesn’t want to pick up the extra tool-bar.hbs template.

I want to use an extra template instead of a control because the template ‘tool-bar’ and the general template are linked on a 1-1 basis and used to split up route specific content between other shared content on the general page.

<nav> 
       <!-- Full site navigation here and additional navigation that is page specific on the right 
       {{outlet 'tool-bar'}} 
</nav>
<!-- some ammount of code that is shared by every page -- >
<div>
{{outlet}} <!-- Route specific outlet -->
</div>

What is the naming scheme i need to use?


#2

This topic about partials is basically my problem. It really sucks that i have to create a whole directory just to contain a template.hbs but it appears that this works and now my template renders properly in the {{outlet ‘tool-bar’}}


#3

You can use absolutely any template in any route and/or outlet regardless of physical file structure.

You need to setup your route using renderTemplate method:

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('favoritePost', {   // the template to render _ NB: You can pass a full path here!
      into: 'posts',                // the template to render into - this is the wrapper to put that template into
      outlet: 'posts',              // the name of the outlet in that template - which outlet to send content into
      controller: 'blogPost'        // the controller to use for the template - if not using default controller specifiy alternate in the form of route name (eg my.route.routeName)
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',
      controller: 'blogPost'
    });
  }
});

from : http://guides.emberjs.com/v1.10.0/routing/rendering-a-template/