2015-07-20 165 views
1

后一个事件我想集中一个输入框在我的模板后Session.set("quizStarted", true);流星火Session.set

Template.quiz.startQuiz = function(){ 
    return Session.get("quizStarted"); 
} 

startQuizAnimate = function(){ 
    Session.set("quizStarted", true); 

    $('.answerBox').focus(); //THIS LINE DOES NOT FOCUS 
} 

Template.quiz.events({ 
    'click #startQuiz' : function(){ 
    startQuizAnimate(); 
    } 
} 


<template name="quiz"> 

<button id="startQuiz">Start!</button> 

    {{#if startQuiz}} 

    <form class="answer"> 
     // I want to focus this input text 
     <input type="text" class="answerBox" name="text" placeholder="Type your answer here" /> 
    </form> 
    {{/if}} 
    </div> 
</template> 

{{#if startQuiz}}该块包含我希望把重点放在输入,但我以后叫它Session.set("quizStarted", true);完成渲染。我怎样才能用Meteor的最佳实践来写这篇文章?

回答

3

使用Tracker.afterFlush来注册自定义代码以在当前无效的每个计算被重新运行时运行,特别是负责重新渲染模板并在{{#if startQuiz}}变成真值之后插入表格标记的反应性模板计算。

function startQuizAnimate(){ 
    Session.set("quizStarted", true); 
    Tracker.afterFlush(function(){ 
    $('.answerBox').focus(); 
    }); 
} 
+0

你救了我一个很头疼,这是完美的解决方案! – goda

+0

'Tracker.afterFlush'肯定似乎解决了很多人的问题,不是吗? :) – CaptSaltyJack