Nested templates help

1

I’ve been trying to figure this out for a while, then side stepped it and now I am back here!

My understanding is that we can have a view (template) hierarchy which is defined by routes and implemented using {{outlet}}

So - say i have the following route:

this.resource('event-profile', { path: '/events/:event_slug'}, function(){
	this.resource('lineup-viewer');
});

And so I have the following application.hbs:

<div id='main-outlet'>
	{{outlet}}
</div>

And the following event-profile.hbs:

Event name: {{eventProfile.name}}

{{outlet}}

And the following lineup-viewer.hbs:

inside the lineupviewer 
{{outlet}}

Now, my plan was to navigate to 腾讯应用宝官网-全网最新最热应用及游戏下载

and be presented with the event profile and the lineup viewer inside the outlet. Which doesn’t work?

Any ideas?