Use a resource multiple times

Design
1

Hey!

We are using Ember-Cli and right now we have the following problem:

We have a resource in our router. This resource has many sub routes. We want this resource to be accessible via it’s URL and nested into another resource. To explain it more concrete:

We have a catalog (which is implemented as resource) and an editor (which is also a resource). On one hand the catalog should be available via it’s own URL and on the other hand it should be also accessible as a sub resource of editor. In the router it would look like this:

Router.map(function () {
    this.resource('editor', {path: '/editor/:plan_id'}, function () {
        this.resource('catalogs', {path: '/catalogs'}, function () {
            // ALL THE CATALOG ROUTES HERE
        });
    });
    this.resource('catalogs', {path: '/catalogs'}, function () {
            // ALL THE CATALOG ROUTES HERE    
    });

});

So we want that the catalog opens if you go to URL /editor/:plan_id/catalogs/…all…subroutes and catalogs/…all…subroutes

Just copying the resource as I outline in my code example didn’t work because we get an exception in vendor.js.

TypeError: Cannot read property 'names' of undefined
    at stashParamNames (vendor.js:34898)
    at EmberObject.extend.setup (vendor.js:37800)
    at applyHook (vendor.js:60085)
    at callHook (vendor.js:60079)
    at handlerEnteredOrUpdated (vendor.js:58839)
    at vendor.js:58806
    at forEach (vendor.js:59969)
    at setupContexts (vendor.js:58805)
    at finalizeTransition (vendor.js:58980)
    at vendor.js:58410

So we wonder what is the smartest way to achieve the described behavior?

Thanks and nice greetings

2 Likes