Nested resource rendering into main outlet and linkTo issue

1

Hi there!

I’m writing a sample app with Ember just to get the core idea and discover what’s possible. My sample app is almost working, but there’s an issue with it.

Here’s the link: http://codepen.io/fnando/pen/FcwsK

I decided to render the nested resource into the main outlet. The problem is that when I try to go to the parent resource, the page isn’t rendered at all. No errors, no nothing. Just blankness. A browser reload make it work.

It must be some hook I’m not setting, so any help would be appreciated.

2

It probably thinks you already have that view on the screen, but you are smashing over it with the renderTemplate into the application. And then when you try to return to the artist view it just removes the album view.

jsbin showing an idea

The routing is a little weird as well, but I’m too tired to look into it much.

3

Thanks for replying!

Yeah, I made it work by adding a outlet to the artist template, but that’s exactly what I’m trying to avoid here.

I know that all tutorials focus on this master-detail pattern, but in this case I really want/need to display on the main outlet (this sample code emulates what I’m trying to do on my real app and it’s way more complicated).

4

Ahh, well if you don’t want the view to live underneath it, it would make more sense that the resource wouldn’t be below it in the router.

 App.Router.map(function() {
   this.resource("artists");
   this.resource("artist", {path: "artists/:artist_id"});
   this.resource("album", {path: "albums/:album_id"});
 });

Working version

5

I see. One thing I noticed. If you access the album resource directly, it doesn’t display the artist info, since you missed the artist resource. Is there a way of saying that you want that model to be loaded as well?

6

I think the biggest problem is related to how the routes are generated. When you define a resource with nested routes, Ember generates a ‘index’ route. The ‘index’ template must be ‘artist/index’. The template ‘artist’ should be used as a ‘layout’ (as in rails layout).

App.Router.map(function() {
  //template = "test1"
  this.resource("test1"); 

  //template = "test2.index" and "test2" (for the layout)
  this.resource("test2", function(){
  });

});

Using the routes above, if you define the template “test2” it will be used by all nested resources. The template “test.index” will be used only by the index route.

Here you can read about routes, I think it explains better than I possible can: Defining Your Routes - Routing - Ember Guides

I made some changes to fix your code: http://codepen.io/diogomafra/pen/wbfHx

7

Thanks. \m/

I’ll read more about the routing system (I did already, but never thought about using the index template).

8

One thing I noticed… The artist route is throwing this warning:

WARNING: The immediate parent route (‘application’) did not render into the main outlet and the default ‘into’ option (‘artist’) may not be expected

Anything I can do to avoid it?

9

To avoid this warning you can define the template ‘artist’ with an outlet:

<script type="text/x-handlebars" data-template-name="artist">
{{outlet}}
</script>

I’m not sure why this warning exists, as I understand, we are following the Ember convention and this message should not be displayed…

10

That warning needs to be revisited. I’m not certain it’s correct.

11

Fixed by https://github.com/emberjs/ember.js/commit/da1097a4ea72159146f30eaf0bd64298febcbc83.