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
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
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
