在Meteor填充下拉列表

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

我想我现在的解决方案很接近。它适用于用户在查看特定记录时刷新页面，但使用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); 
    } 
});

来源

2015-12-02 Kevin McGovern

您不需要使用DOM操作设置下拉列表，只需让模板为您执行即可。当数据库查询更改时，流星会为您重新提供模板。

模板：

<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

来源

2015-12-02 19:36:13 JeremyK

对不起，我想我是不是明确。模板填充下拉没有问题。问题是，我无法将下拉菜单设置为显示所选选项。让我更新原始问题，使其更清楚。 –

好吧这仍然是一个想法，我会更新上面的代码。 – JeremyK

这是做到这一点的最好方法吗？如果你有多种形式，我不知道这是否会成功。它看起来像在给定时间在Selected集合中存储单个下拉值。有没有办法做到这一点，你通过_id除了'this'在isSelected函数中？ –

在Meteor填充下拉列表

回答

相关问题