Question

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

我认为我现在的解决方案已经接近了。如果用户在查看特定记录时刷新页面但使用iron导航到模板，则可以正常工作：路由器在模板完全呈现之前调用辅助函数，将下拉列表中的选定值留空。如果我将逻辑移动到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 :(我使用反：假包来生成数据 - 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

在Meteor中填充下拉列表

1 个答案: