Ember Routing: Reusing a resource under multiple parent routes

Question

I have the following routing setup:

this.resource('blog',function(){
    this.resource('selectimage',{path:"selectimage/:returncontext"},function(){});
});

this.resource('post',{path:":post_id"},function(){
    this.resource('selectimage',{path:"selectimage/:returncontext"},function(){});
});

What I would have expected is, when navigating to blog.selectimage and post.selectimage, that the same router,controller and view would be used. Unfortunately it seems that the last entry wins.

Is it possible to achievie this, without leaving the parent context(post/blog), when navigating to selectimage (Obviously I could inherit from the base-selectimages-classes, but I'm hoping there is some generic ember way of doing this.)

selvagsz selvagsz · Accepted Answer · 2013-11-14T10:45:29

You cannot have same resource name for two different routes as Ember relies more on naming conventions. But Ember provides ways to reuse the same controller and templates

Rename your selectimage under post to something else

this.resource('post',{path:":post_id"},function(){
   this.resource('xxx',{path:"xxx/:returncontext"});
});

And in the router, you could specify the templateName and controller that has to be reused. Something like this should make it reusable

App.xxxRoute = Em.Route.extend({
  controllerName: 'selectimage',
  templateName: 'selectimage'
});

Sample Demo

Ember Routing: Reusing a resource under multiple parent routes

1 Answers