Meteor Newbie 询问最佳实践

Question

学习 Meteor，这很棒，但我在“最佳实践”方面有点挣扎。

例如，我正在构建一个小示例测验，如下所示：

Question : 1 + 1 = ?    ---> Dropdown box [1, 2, 3]
Question : 1 + 0 = ?    ---> Dropdown box [1, 2, 3]
Question : 1 - 1 = ?    ---> Dropdown box [1, 2, 3]
Question : 2 + 1 = ?    ---> Dropdown box [1, 2, 3]

然后，在底部是一个按钮，上面写着“给我打分”。

当该按钮被按下时，它应该会遍历每个问题并在下拉框旁边放置一个小“正确”或“错误”。

所有这些看起来都像：

<template name="questions">
    <div class="jumbotron">
        {{#each questions}}
            <span class="lead">{{question}} </span>
            <select class="answerDropDown">     
              {{#each answer}}              
                <option value={{this}}>{{this}}</option>
              {{/each}}                 
            </select>

            <span id="correctornot">{{correctornot}}</span>
        {{/each}}       
    </div>
</template>

我正在使用以下方法从数据库中提取数据：

Questions = new Mongo.Collection("questions");

一切正常。我已经插入了事件，它反应良好，等等……等等……

我不能轻易做的是看看如何使正确或不起作用。嗯...我这么说，但我的意思是没有什么真正有意义的。

我会想象当我得到数据时：

Template.questions.helpers({
questions: function() {
  return Questions.find({});
}

我想为每个问题添加额外的数据，但这并不意味着要保存在数据库中。

我想我只是在寻找正确的方法。甚至答案也没有保存在任何地方，所以当我检查它是否正确时，我目前正在查看在下拉选择事件中更改的会话变量。

无论如何，欢迎所有建议。

干杯。

Answer 1

您想要的是从 Blaze 的反应性中受益，而无需在数据库中保留信息。答案？ 响应式客户端值！它们有不同的形式：

• Session variables
• Reactive variables
• Client-side collections
• ...大气包提供的更多内容

当在指定的上下文（例如helpers 或Tracker.autorun）中进行评估时，包含在所述上下文中的代码将在每次反应变量中的值发生变化时再次运行，因此，在助手的情况下，会触发变化在您的模板中。

示例：使用Session

在这里，我们将看到使用内置Session 对象的更简单方法。假设您的 questions 模板包含在名为 form 的模板中，其中包含您的提交按钮：

<template name="form">
  {{> questions}}
  <form id="form">
    <input type="submit" value="Score me" />
  </form>
</template>

首先，当form 模板被渲染时，我们必须将submitted 会话变量设置为false。

Template.form.onRendered(function () {
  Session.set('submitted', false);
});

然后，捕获表单提交事件，而不是提交，我们将设置新的submitted 反应变量为 true。

Template.form.events({
  'submit #form': function (e, t) {
    e.preventDefault();
    // do some prior validation here if needed
    Session.set('submitted', true);
  }
});

现在，我们需要做的就是检查submitted 模板助手是否将submitted 设置为true 或false。如果是true，那么我们继续显示correctornot 帮助器的结果，它获取下拉列表中选择的值并将其与存储在当前数据上下文中的问题的正确答案（each环形）。假设此答案存储在您问题的 correctAnswer 属性中：

Template.questions.helpers({
  'questions': function() {
    return Questions.find({});
  },
  'submitted': function () {
    return Session.get('submitted');
  },
  'correctornot': function () {
      var userResponse = $('#'+this._id+'.answerDropDown').val();
      return (this.correctAnswer == userResponse);
  }
});

这是我们略微增强的questions 模板：

<template name="questions">
    <div class="jumbotron">
        {{#each questions}}
            <span class="lead">{{question}} </span>
            <select id="{{_id}}" class="answerDropDown">     
              {{#each answer}}              
                <option value={{this}}>{{this}}</option>
              {{/each}}                 
            </select>
            {{#if submitted}}
              <span id="correctornot">{{correctornot}}</span>
            {{/if}}
        {{/each}}       
    </div>
</template>

如您所见，只需很少的代码，您就可以实现良好的响应式行为。

如果我不想用毫无意义的标志污染Session 怎么办？

然后，您可以查看reactive variables。一旦您想到了逻辑，它们就很容易实现。在您的案例中，棘手的部分是您似乎使用了嵌套模板：触发响应式更改的提交按钮和对其做出反应的问题列表不在同一个模板中。因此，您需要在模板实例之间导航以访问 submitted 反应变量。查看this answer 以获取有关此主题的线索。