“Error while processing route” with unknown reason

3
votes

My Goal: emulate nested route, but render it into application outlet.

For example:

/videos - top route

/videos/video001 - nested route

/videos/video001/slide001 - not nested. It is on the same level as /videos.

How I am doing this:

I have following router: 

App.Router.map(function () {
    this.resource('videos', { path: '/videos' }, function () {
        this.resource('video', { path: '/:video_id' });
    });

    this.resource('slide', { path: '/videos/:video_id/:slide_id' });
});

To make 'slide' route work as expected I am overriding 'serialize' method, and return 'video_id' and 'slide_id'

And at this point everything seems to be ok. At least page loads as expected.

What is the issue?

When I navigate to "/videos/video001" from "/videos/video001/slide001" via "link-to' helper, I see following error: "Error while processing route: video". And nothing more. I can't understand what kind of error happens and why ember can't process route correctly. However I see that URL has been changed to "/videos/video001".

Any suggestions? How to debug this situation or at least get any useful error message?

UPDATE This article describe exact current situation and gives some solutions: http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting

2
ember.jsember-router
suggestion, in chrome console (keep it open as you're loading the app), expand the error while processing route message, it should have a stack that could help you point where the error is. Question: Why isn't slide a resource of videos.video? - MilkyWayJoe
That stack trace is not helpful at all. List of internal methods of ember.js ember-data.js and jquery. I can't have 'slide' nested under 'video' because i need render it in application outlet. If i will user render hook and specify "into":"application", i will have another bunch of issues related to maintaining view hierarchy. - pro100sanya
Nest the resource slide in your video resource - Patsy Issa

2 Answers

1
votes

Ok. I wasn't able to figure out what is the issue, and seems to be nobody able to help with that even on ember irc channel. So I have found interesting article http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting and implemented nesting via {into: 'application'}, but to make it work correctly i have overrided renderTemplate hook in all templates to define correct rendering order. And everything works fine.

1
votes

I do something similar but without the multiple IDs. Try this in your router:

this.resource('videos', { path: '/videos' }, function () {
    this.resource('video', { path: '/:video_id' });

    this.resource('videos.video.slide', { path: '/videos/:video_id/:slide_id' });
});

Your routes should be App.VideosRoute, App.VideosVideoRoute, and App.VideosVideoSlideRoute. Same for the controllers (if needed)