Nested resources and path

Question

I'd like to nest resources in Ember, but to be able to access them with a short URL.

For example: mysite.com/admin will open the route: /routes/profiles/settings/admin

Is it possible to do something like that using Ember? I'm currently using Ember 1.7 with Ember App Kit.

I tried the following but it doesn't work:

var Router = Ember.Router.extend();

Router.map(function () {
this.resource('profile', function () {
    this.resource('profile.settings', { path: '/settings' }, function () {
        this.resource('profile.settings.admin', { path: '/admin' });
    );
});

Thanks.

Answer 1

Your code doesn't work because your inner most resource is inheriting the /profile path from the outer most resource and /settings from the middle resource. If you want it to be just plain /admin, you'd have to do something like this:

this.resource('profile', { path: '' }, function() {
    this.resource('profile.settings', { path: '' }, function() {
        this.resource('profile.settings.admin', { path: '/admin' });
    });
});

However, this is going to get pretty hairy when you have more routes that each want top-level paths. You might find it easier to just declare a admin route at the top level, then redirect using the redirect hook in the route.