在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填充下拉列表

回答

相關問題