javascript - Meteor Select Box - 根据数据上下文将选项标记为选中

Question

我一直在努力弄清楚如何在选择框中的选项上设置“已选择”属性，但今天没能成功。任何帮助将不胜感激。

我想要完成的事情: 当用户选择一个选项并点击提交时，数据将保存到一个新的 mongo 文档中，并且新条目显示在屏幕上(这部分有效)。浏览器刷新后，状态丢失(由于未设置选定属性)并且选择框返回到第一个选项。我需要弄清楚如何根据用户在该特定文档上保存的值来设置选定状态。此页面上有许多相同的选择框，允许用户为其他条目选择不同的选项。

引用资料(尝试实现但没有成功):

1. Check for equality in Spacebars?

2. https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected

3. How do I indicate 'checked' or 'selected' state for input controls in Meteor (with spacebars templates)?

选择框模板:

<template name="tEdit">
<div class="form-group">
  <div class="controls">
    {{> fFEdit}}
  </div>
</div>
</template>

选择框选项模板:

<template name="fFEdit">
  <select class="form-control" name="fFSelect">
    {{#each fFSelect}}
      <option value="{{fId}}">{{fF}}</option>
    {{/each}}
  </select>
</template>

设置数据上下文

Template.fFEdit.helpers({
  fFSelect: function() {
    var fFArray = [
      { fF: "foo", fId: 0 },
      { fF: "bar", fId: 1 },
      { fF: "buzz", fId: 2 }
    ];
    return fFArray;
  }
});

Answer 1

如果你希望状态在浏览器刷新时保持不变，你应该能够从服务器或类似 Meteor Session 的东西中获取它。 .

您需要的第二件事是获取选定状态的助手。方便的是，Meteor 使数据上下文在 this 下可用(对于每个循环，此上下文是一个单独的项目)。

Template.userEdit.helpers({
  userSelected: function() {
    if(this.id === Session.get("selectedUserId")) {
      return "selected";
    }
  }
});

这假设您之前已经使用 Session.set("selectedUserId", user._id) 之类的内容设置了 Session 变量。

然后在你的模板中:

<template name="userEdit">
  <select class="form-control" name="userSelect">
    {{#each users}}
      <option {{userSelected}}>{{username}}</option>
    {{/each}}
  </select>
</template>

(注意:使用元素检查器检查 DOM 实际上无法看到选中状态。)