controller – 在Ember.js中使用重定向挂钩时防止执行路由

2023年4月8日 225次阅读

我正在和Ember.js一起申请.这是一个小问答,其中问题与图片一起显示,同时在音频播放器中播放,一个接一个.当问题得到解答时,下一个问题将通过过渡到问题路径并将下一个问题作为模型来显示.

为了防止用户使用浏览器后退按钮,我检查问题路径中的重定向功能是否已完成问题.在那种情况下,我将它们转换回下一个问题.

这可行,但函数setupController仍然执行完成的问题,我刚刚重定向.这导致完成的问题在音频播放器中再次播放,并且新问题同时播放的问题.

有没有办法防止路由在重定向后进一步执行setupController()和renderTemplate()？

现在我使用自己的变量来查看路由是否已被重定向,但感觉就像一种hackish方式,如果有更好的方法我现在想要.

这是我的代码：

//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);
    }

});

最佳答案 最新版本的ember已弃用重定向,转而使用beforeModel和afterModel钩子.这使您可以更精细地控制用户进入路线时发生的情况,特别是在前进/后退按钮的情况下.

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

要使用这些新的钩子,你需要使用最新的ember.有关更改的详细信息,请查看this gist.

点赞