EmberJS-Rendering templates for nested resources

Question

My Ember router looks similar to below.

App.Router.map(function() {
    this.resource('projects', function () {
        this.resource('listings', { path: '/:project_id/listings' }, function() {
            this.route('listing', { path: '/:listing_id' });
        });
    });         
});

I have 2 templates (projects, listings). The projects template has a {{#link-to}} helper that adds an anchor to the listings resource. The projects template is working fine. The {{#link-to}} helper also seems to generate the url correctly (~ /projects/2/listings).

Now the listings are rendered correctly but they are rendered inside the projects template. I assume this is because the resources are nested. So I removed the nesting and made both projects and listings as their own resources.

App.Router.map(function() {
    this.resource('projects');          
    this.resource('listings', { path: 'projects/:project_id/listings' }, function() {
            this.route('listing', { path: '/:listing_id' });
    });
});

The problem is when the route transitions to listings, the listings template is not rendered. It's just blank. The below fiddle demonstrates the issue.

Fiddle: http://jsfiddle.net/harshavarma/aqHnt/3/

A few things were wrong in the fiddle: 1- as you said, you need an {{outlet}} on the projects template, as listings is a child of projects, such that its template needs a place to render inside the parent template. 2- you passed a project object the listings route/controller, where the listings template expects a list. 3- thing was that the listings template references listing.PropertyCode rather than listing.propertyCode. fiddle:jsfiddle.net/UZq9Q However - I'm not sure all that really answer your question - please revise the fiddle or revise question to give more info and code. — Meori Oransky
@MeoriOransky Thanks for your time. I added a new fiddle with the corrections. It works but the listings template gets rendered inside the projects whereas I want to replace the projects entirely. So I guess I should un-nest the resources the way I did and just use the 'path' hash to manipulate the url. But the listings template is not getting rendered if I do that. Please take a look at this new fiddle. jsfiddle.net/harshavarma/aqHnt/3 Can you point what I'm doing wrong here. — Sparda

joegoldbeck joegoldbeck · Accepted Answer · 2014-03-18T17:17:20

To do what you want, structure your routes in the same way you started with

App.Router.map(function() {
    this.resource('projects', function () {
        this.resource('listings', { path: '/:project_id/listings' }, function() {
            this.route('listing', { path: '/:listing_id' });
        });
    });         
});

Then, the projects template should only be {{outlet}}. If there is content that you want to render only when you navigate to /projects, but not when you navigate deeper, put that content in a projects/index template (or whatever that template is called based on your naming conventions) and setup any necessary router and controller stuff on ProjectsIndexRoute and ProjectsIndexController. Now your listings template will only be nested inside projects which is just an outlet, and you won't see any of the projects/index content when viewing listings.

http://emberjs.com/guides/routing/defining-your-routes/#toc_resources

EmberJS-Rendering templates for nested resources

1 Answers