在 Meteor 中填充下拉列表

Question

我正在使用辅助函数在 Meteor 中构建一个下拉列表。但是，用户将来需要能够更新表单，因此我需要根据 Mongo 中的数据使用之前选择的所有值重新填充表单。我可以使用我的集合数据填充表单中的文本框和文本区域，但我无法将下拉列表中的值设置为存储在我的 Mongo 集合中的值。

我认为我现在的解决方案很接近。如果用户在查看特定记录时刷新页面但使用 iron:router 导航到模板，则在模板完全呈现之前调用辅助函数，将下拉列表中的选定值留空。如果我将逻辑移动到 OnRendered 块，则无法访问 this.source 以从集合中动态获取值。

有没有人知道如何根据存储到集合中的值填充下拉列表的选定值？提前致谢！

<template name="leadForm">
    <form id="newLeadForm">
    <select class="form-control" name= "leadSource" id="leadSource">
        <option disabled="disabled" selected="selected">Please Select</option> 
        {{#each categories}}
            <option value="{{this}}">{{this}}</option>
        {{/each}}
    </select>
    {{setDropdownValue}}
    </form>
</template>


Template.leadForm.helpers({
    'categories': function(){
        return ["Option1", "Option2", "Option3"]
    },
    'setDropdownValue': function(){
        $('#leadSource').val(this.source);
    }
});

Answer 1

您无需使用 DOM 操作设置下拉菜单，只需让模板为您完成即可。当数据库查询发生变化时，meteor 会为你重新渲染模板。

模板：

<template name="leadForm">
    <form id="newLeadForm">
    <select class="form-control"  id="leadSource">
        <option disabled="disabled">Please Select</option>
        {{#each categories}}
            <option value="{{this.option}}" {{isSelected this.option}}>{{this.option}}</option>
        {{/each}}
    </select>
    </form>
    <br/>
    <button id='addOption'>Add a new option to Drowdown</button>
</template>

js:（我正在使用anti:fake包生成数据-meteor add anti:fake）

Options = new Mongo.Collection("options");
Selected = new Mongo.Collection("selected");

if (Meteor.isClient) {
  Template.leadForm.helpers({
    'categories': function(){
        return Options.find();
    },
    'isSelected': function(option){
      var selected = Selected.findOne('SELECTED') ? Selected.findOne('SELECTED').selected : '';
      return option === selected ? 'selected' : '';
    },
  });

  Template.leadForm.events({
    'click #addOption': function () {
      Options.insert({option: Fake.sentence(3)});
    },
    'change #leadSource': function(event, template){
      Selected.update('SELECTED', {selected: event.target.value});
    }
  })
}

if (Meteor.isServer) {
  // code to run on server at startup
  Meteor.startup(function () {
    if(Selected.find().count() === 0)
      Selected.insert({_id: 'SELECTED', selected: ''});
    if(Options.find().count() === 0) {
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
      Options.insert({option: Fake.sentence(3)});
    }
  });
}

meteorpad example