Ember.js Nested routes and templates not working

Question

I'm trying to make a simple app where on the index page you have your nav bar and just a simple "hello" message. You can then click on users or organizations and it will adjust respectively.

routes.js

App.Router.map(function() {
  this.resource('index', { path : '/' }, function() {
    this.route('users', { path : '/users'});
    this.route('org', { path : '/org'});
  });
})

App.IndexRoute = Ember.Route.extend({
  renderTemplate : function() {
    this.render('index');
    this.render('nav', {
      outlet : 'nav',
      into   : 'index'
    })
  }
})

App.IndexUsersRoute = Ember.Route.extend({
  model: function() {
    return EmberFire.Array.create({
      ref: new Firebase(FirebaseRef + 'users')
    });
  },
  renderTemplate: function() {
    this.render('index');
    this.render('nav', {
      outlet: 'nav',
      into  : 'index'
    });
    this.render('users', { 
      outlet: 'users',
      into  : 'index'
    });
  }
});

App.IndexOrgRoute = Ember.Route.extend({
  model: function() {
    return EmberFire.Array.create({
      ref: new Firebase(FirebaseRef + 'organizations')
    })
  },
  renderTemplate: function() {
    this.render('index');
    this.render('nav', {
      outlet: 'nav',
      into  : 'index'
    });
    this.render('org', {
      outlet: 'org',
      into  : 'index'
    });
  }
});

And in index.html

<!-- Nav -->
  <script type='text/x-handlebars' data-template-name='nav'>
    <nav>
      ...........
    </nav>
  </script>
  <!-- End Nav -->

  <!-- Index -->
  <script type='text/x-handlebars' data-template-name='index'> 
    {{outlet nav}}

    <section id='userDisplay'>
      <div class="row">
        {{outlet users}}
      </div>
    </section>

    <section id='orgDisplay'>
      <div class="row">
        {{outlet org}}
      </div>
    </section>
  </script> 

  <!-- Users -->
  <script type='text/x-handlebars' data-template-name='users'>
    <section id='registerForm'>  
      <h3>Register A User:</h3>
      .......
    </section>
  </script>

  <!-- Orgs -->
  <script type='text/x-handlebars' data-template-name='org'>
    <section id='registerForm'>  
      <h3>Register An Organization:</h3>
      .......
    </section>
  </script>

Currently the Nav section renders properly in every route, but I get nothing from the users or orgs templates.

What am I leaving out in order to render these templates properly?

Answer 1

Try to remove this.render('index') from nested routes, their parent index will be rendered.

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

http://emberjs.jsbin.com/lebek/1#/users

http://emberjs.jsbin.com/lebek/1#/org