Nested route in emberjs without using the resource outlet

Question

I have a router with corresponding templates for each route (and route objects). I want to be able to display each template independently of its parent, meaning I don't want the nested routes to be rendered to the parent template's outlet. Essentially making a separate "page" for each nested route.

App.Router.map(function() {
  this.resource('recipes', function() {
    this.route('new');
    this.route('show', { path: '/:recipe_id' });
  });
});

I'm using ember1.0.0-rc1

Thanks

Answer 1

I want to be able to display each template independently of its parent, meaning I don't want the nested routes to be rendered to the parent template's outlet.

Maybe stating the obvious but that's exactly what will happen if you don't create a template for the resource. In your case, if you don't create a recipes.hbs template then ember will render the new.hbs and show.hbs templates into the {{outlet}} in application.hbs.

NOTE: If you do this, Ember will output a console warning "The immediate parent route did not render into the main outlet ..."

This is explained in more detail in the ember routing guide