Rendering views in Ember globally

Question

I’m quite new in Ember world (came from Backbone/Marionette powered apps), and some things are quite unclear for me.

I’d like to render 3 views in my application: Sidebar, Navigation, and view with actual content (based on my path).

In order to do that, I added to my application tempalate 3 outlets:

<nav id="main_navigation">{{outlet navigation}}</nav>
<!-- some html goes here... -->
<nav id="sidebar_navigation">{{outlet sidebar}}</nav>
<section id="content">{{outlet}}</nav>

Because I want to display them on every page, I created ApplicationRoute with following code:

App.ApplicationRoute = Ember.Route.extend
  activate: ->
    @render "sidebar",
      outlet: "sidebar"
      # into "application"

Of course I’ve got sidebar template, but I don’t think its code is relevant here (I can attach it if it’ll be relevant). Unfortunately, this leads to following error:

 Error while loading route: Error: Assertion Failed: An outlet (sidebar) was specified but was not found.

If I try to comment out into "application", then I get this: Error while loading route: TypeError: Cannot read property 'connectOutlet' of undefined

I’d be really greatful, if someone tell me how to render this templates globally (on all pages).

Answer 1

The activate hook is executed when the router enters the route. The template must already be in scope in order to render an item into it. That being said, you can just render the application template first, then render the navbar/sidebar using the renderTemplate hook.

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(){
    this.render(); // render the application template
    this.render('nav',{
                into: 'application',
      outlet: 'navigation'});
    this.render('side',{
                into: 'application',
      outlet: 'sidebar'});
  }
});

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

Additionally you could do this all even easier using render in the template

<script type="text/x-handlebars">
  Appplication

  {{render 'nav'}}
  {{render 'side'}}
  <section id="content">{{outlet}}</nav>
</script>

http://emberjs.jsbin.com/lemutisa/2/edit