1
votes

I have a survey application built using Ember JS, Firebase and a Torii Adapter for authentication and session management. I'm trying to understand the behavior of a specific route (called the 'takesurvey' route) when it is refreshed.

The related code from the router map (router.js) is given below:

this.route('user', function() {
    this.route('surveys');
    //the code below works but on refresh, 
    //nests the takesurvey page under user
    this.route('takesurvey', {path: ':survey_id', resetNamespace: true}); 
  });
   //alternatively, uncommenting the line below redirects to user.surveys on refresh of page
   //this.route('takesurvey', {path: ':survey_id'}); 

Here's the issue with two scenarios (also described as comments in the code above):

Scenario 1: The takesurvey page is kept as a stand-alone route

In this case the take survey page loads fine when a user navigates to http://<application name> /survey_id. But on refresh of the page, it takes the user back to the user/surveys page.

Scenario 2: The takesurvey route is nested underneath the user route.

In this case, when the user navigates to http://<application name> /user/survey_id, the survey loads fine and the refresh also works as expected.

So my question is, why does this happen?

Ideally, based on current requirements, I'd like to keep the takesurvey page as a standalone route and when a user clicks on refresh on that takesurvey page, it should continue to be there on that same page and not redirect him to the user/surveys page.

1

1 Answers

2
votes

I think the problem is that you are overriding the path for the takesurvey route.

Change your router to look like the following and let me know if that works for you:

this.route('user', function() {
  this.route('surveys');
  this.route('takesurvey', {path: 'takesurvey/:survey_id', resetNamespace: true}); 
});