javascript - Meteor helper 添加适当的 CSS 一小会儿，然后消失

Question

如果用户通过下面的 {{checkAnswer}} 帮助器单击正确答案或错误答案，我会尝试显示某个类别:

    <div class="question" {{attributes}}>
      <a href="#" data-value=0 class="checkOne upvote btn {{checkAnswer}}">A</a>
      {{answerOne}}
    </div>

用户提交一个答案，该答案将创建一个提交，然后最终检查该用户提交的内容是否正确。如果用户提交正确应显示 btn-success，错误应显示 btn-danger，否则应显示 btn-primary。

Template.questionItem.helpers({   
checkAnswer: function() {
        var user = Meteor.user();
        var game = GameCollection.findOne({current: true});
        var currentQuestion = game.currentQuestion;
        var question = game.gameQuestions[currentQuestion];
        var correctAnswer = question.correctAnswer;
        var submission = Submissions.findOne({userId: user._id,
                                              gameId: game && game._id,
                                              currentQuestion: currentQuestion});
        if (submission && submission.submission === correctAnswer) {
            return 'btn-success';

        } else if (submission) {
            return 'btn-danger';
        } else {
            return 'btn-primary upvotable'
        }
    },

当我点击正确的提交时，它会从 btn-success 变成绿色，持续一小会儿(如果不正确，它会变成红色，持续一小会儿)，但最终会转到 btn Primary。为什么它不保持 btn-success (或 btn-danger)？

Answer 1

上下文中的某些内容正在发生变化。 Meteor 数据上下文的构建方式使得您不需要进行所有“当前”检查。您可以使用 this 访问当前数据上下文，这将显着简化您的代码。

我首先在服务器端检查提交是否正确，然后将其存储为提交本身的属性。然后，您可以执行简单的 if...then 来返回正确的引导类名称。

这是一个简单的示例:meteorpad

如果你希望JS文件快速放入一个全新的项目中，这里有一个Gist .

您会注意到在这两个中如何使用 this._id 或 this. Correct 来访问正确/当前的数据上下文。希望能帮助/让您走上正轨。