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

Answer 2

Quick note from the ember guides

If you define a resource using this.resource and do not supply a function, then the implicit resource.index route is not created. In that case, /resource will only use the ResourceRoute, ResourceController, and resource template.

Your routing is fine and @mikegrassotti is correct, although if you want an index for "recipes" without having your "new" and "show" route templates nested inside "recipes"(no master/detail) you will need to create an recipes/index template with no outlet inside.

<script type="text/x-handlebars" data-template-name="recipes/index">
<ul>
  {{#each}}
    <li>{{recipe}}</li>  
  {{/each}}
</ul>

You do not need to change your route setup. As Mike mentioned above ember will render the new.hbs and show.hbs templates into the {{outlet}} in application.hbs

Answer 3

Ember.js does not support nesting routes, it only supports nesting resources. The ultimately-nested route can contain a route.

Think of resources as things, and routes as actions.