Prevent route execution when using redirect interceptor in Ember.js

Question

I am making an application with Ember.js. This is a small survey in which questions are displayed with pictures and, meanwhile, are played in an audio player, one after another. When the question was answered, the next question is shown by going to the Route question with the next question as a model.

So that the user cannot use the browser button, I check if the question is completed in the redirection function from my question route. In this case, I proceed to the next question.

This works, but the setupController function is still executing for the finished question that I just redirected. This leads to the fact that the finished question is played back in the audio player, and a new question is played at the same time.

Is there a way to prevent the route from further executing setupController () and renderTemplate () after redirecting it?

Now I use my own variable to see if the route was redirected, but it looks like a hacker way, and I would like it if there was a better way.

This is my code:

//question route Player.QuestionRoute = Em.Route.extend({ redirect: function(question){ Player.Quiz.setCurrentQuestion(question); nextQuestion = Player.Quiz.getNextQuestion(); if(question.get('finished') == true && nextQuestion != null) { this.transitionTo('question', nextQuestion); //hackish way to prevent the other functions from executing this.set('hasBeenRedirected', true); return; } //hackish way to prevent the other functions from executing this.set('hasBeenRedirected', false); }, setupController: function(controller, model){ //hackish way to prevent the other functions from executing if(this.get('hasBeenRedirected') == true) return; controller.set('content', model); /* do some other things */ controller.startQuestion(); }, renderTemplate: function(controller, model) { //hackish way to prevent the other functions from executing if(this.get('hasBeenRedirected') == true) return; this.render('stage'); this.render('dock', { outlet: 'dock' }); this.render(model.getPreferredTemplate(), { into: 'stage', outlet: 'question' }); this.render("quizinfo", { into: 'stage', outlet: 'quizinfo', controller: this.controllerFor('quiz', Player.Quiz), }); }, model: function(param){ return Player.Quiz.getQuestionAt(param.question_id); } }); 

Answer 1

The latest version of ember has deprecated redirect in favor of the beforeModel and afterModel hooks. This gives you much finer control over what happens when the user enters a route, especially with forward / backward buttons.

 App.QuestionRoute = Ember.Route.extend({ afterModel: function(question, transition) { nextQuestion = Player.Quiz.getNextQuestion(); if (question.get('finished') == true && nextQuestion != null) { this.transitionTo('question', nextQuestion); } } }); 

To use these new hooks, you will need to work with the latter. See this meaning for details of the change.

Answer 2

Try putting your transition in Ember.run.next

  if(question.get('finished') == true && nextQuestion != null) { var _self = this; Ember.run.next(function() { _self.transitionTo('question', nextQuestion); }); return; }