Ember.js Cannot find nested route

Question

My application has nested templates. Which will be shown by the router below:

this.resource('products', function() { 
    this.resource('product', {path: ':product_id'}, function() {  // Error: There is no route named product
        this.resource('page', {path: 'page/:page_id'});
    });
});

Kudos to @kingpin2k for his help on this router: Ember.js How to show two routes at the same time

The problem is, without the page resource the product route can be found. When I add the page resource the product.index route has now the correct url for the product route as I see in Ember Inspector:

Routes and URL's:

`product`       | (empty)
`product.index` | /products/:product_id // this one must be on the above `product` route
`page`          | /products/:product_id/page/:page_id // correct

As you can see, the new product.index is causing trouble. But the .index variant appears only when I add the page route.

Edit: to clearify, with the above router I get the error: Error: There is no route named product. The code that generates that error is in a view:

var router = self.get('controller.target.router');
var product = self.get('content').findBy('index', 0);

router.transitionTo('product', product); // Error

Answer 1

Will you try this

var controller = self.get('controller');
var product = self.get('content').findBy('index', 0);

controller.transitionToRoute('product', product);