Search code examples
ember.jsember-router

Index Route under another Index route

I am building a UI that has several layers of nested routes. I came to a scenario where I want to nest something under an implicit indexroute. Now I have to define that index route and the nesting beneath, or not?

Here is a screenshot what I am trying to achieve: Layout

My router that is trying to implement this:

  this.resource('usergroup', { path: '/tippspiele/:usergroup_id' }, function(){
      this.resource('usergroup.index', { path: '/' },function(){

      });
      this.route('table');
  });

Unfortunately the UsergroupIndexIndex template is not rendered by default. And within the view tree I can't see it either.

This is how this setup looks in ember inspector: Ember Inspector screenshot

I also have added a manual Link in order to check if I can link to the indexIndex but the outlet for the subtemplate stays empty.

Solution

  • Template name should be given as follows: 

    <script type="text/x-handlebars" data-template-name="usergroup/index/index">
    // template content
</script>

    This is the corresponding route:

    App.UsergroupIndexIndexRoute = Ember.Route.extend({
  model: function() {
    // return the model
    return [];
  }
});