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

score 4 · Accepted Answer · answered Mar 14 '13 at 03:02

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

Thanks for the response. I actually realized what you said a little while after I made the question. What I did was, I kept the recipes.hbs, but all it had in it was the {{ outlet }}. Then I had the new and show defined as I had them. All I needed to do was make a new template for index along with the route object and use {{#linkTo 'recipes.index' }}Recipes{{/linkTo}} instead of just {{#linkTo 'recipes'}}...{{/linkTo}} — spullen, Mar 14 '13 at 12:04

score 1 · Answer 2 · answered Mar 05 '14 at 04:04

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

score 0 · Answer 3 · answered Mar 14 '13 at 02:42

0

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.

answered Mar 14 '13 at 02:42

Zach Riggle

2,975
19
26

Nested route in emberjs without using the resource outlet

3 Answers3