Question

我一直试图弄清楚如何在选择框中的选项上设置'selected'属性，并且今天已经不足。任何帮助将不胜感激。

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

引用（尝试实施但没有运气）：

Check for equality in Spacebars?
https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected
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，实际上无法看到所选状态。）

Answer 2

我不确定这是否是我问题的最佳答案，尽管这是我提出的将所选属性添加到已保存选项的方法。我欢迎任何拥有更好/ Meteor解决方案的人。

当用户点击编辑链接时，我会找到需要更新的输入并在onClick上分配值。理想情况下，我宁愿在pageLoad上完成此操作，但感觉该解决方案可能会影响初始的pageLoad时间。

Template.tItem.events({
  'click .edit-t-item': function(e) {
    e.preventDefault();

    var $editTWrapper = $(e.currentTarget).next('.edit-t-wrapper');
    $editTWrapper.find('[name=tNEdit]').val(this.tName);
    $editTWrapper.find('[name=fFSelect]').val(this.fFId);
  }
});

Meteor Select Box - 根据数据上下文选择标记选项

2 个答案: