填充HTML從流星庫中的數據庫中選擇下拉菜單

Question

我一直無法找到正確的答案，因此看看stackOverflow組員是否可以提供幫助。我知道這看起來很平常，但這個例子與我在搜索時發現的有些不同。

我有了一個選擇下拉列表中其與相關部分作爲這樣的流星模板：

{{#each phoneNumber}} 
     <li> 
      <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here" value="{{number}}"> 
      <select id="{{this._id}}" name="type"> 
      <!-- go through collection and see which is selected there, mark it as selected here so they match --> 
       <option selected="{{selectedOrNot}}" name="selection">Work</option> 
       <option selected="{{selectedOrNot}}" name="selection">Home</option> 
       <option selected="{{selectedOrNot}}" name="selection">Mobile</option> 
       <option selected="{{selectedOrNot}}" name="selection">Office</option> 
       <option selected="{{selectedOrNot}}" name="selection">Fax</option> 
       <option selected="{{selectedOrNot}}" name="selection">Other</option> 
      </select> 
      <input id="{{this._id}}" type="button" class="remove" value="X"> 
     </li> 
    {{/each}} 

是selectedOrNot被顯示爲這樣的幫手的完整代碼：

Template.addPhoneNumber.helpers({ 

    //the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form 
    'phoneNumber': function() { 
     return newOrgPhoneNumbers.find(); 
    }, 


    //let's us choose which of the dropdown items are selected 
    'selectedOrNot': function(event){ 

     var collectionType = newOrgPhoneNumbers.findOne(); //get the type from the collection (EG: Home, Mobile, Fax, etc) 
     var typeFormName = $('[name="selection"]').val(); //get the data from the form (EG: Home, Mobile, Fax, etc) 


     //When drawing the select dropdown, see if there's a match and return selected if so 
    if(collectionType.type === typeFormName){ 
     console.log ('selected!'); 
     return 'selected'; 
    } 

    } 

    }); 

我在做什麼：

我有數據存儲在一個名爲newOrgPhoneNumbers的集合中。

該數據包含一個「類型」，其中包含「Home」，「Mobile」，「Work」等。

當我在模板中繪製選擇下拉菜單時，我希望選擇選項以匹配newOrgPhoneNumbers集合中的「類型」選項。請注意，有多個選擇下拉菜單，其中一個用於數據收集中的每個項目。因此，可能會說，表格中有6個電話號碼，每個電話號碼都有自己的ID，取自它的集合。

就本示例而言，集合數據具有「Home」作爲「類型」，所以我希望它在選擇下拉列表中選擇Home進行繪製。

現在我可以看到這裏有什麼問題。 typeFormName採用選擇器下拉列表的VALUE，默認情況下始終爲「工作」。

如何在我的If條件下重新修改此匹配項，並在匹配時返回「selected」？我想我需要從模板中檢索與集合中的值相匹配的值，但選擇器下拉列表中沒有這樣的值（因爲它在繪製時總是「工作」）。

我已經花了大約5個小時對此進行了各種邏輯嘗試，所以現在是時候提問了。任何幫助是極大的讚賞。羅布

Answer 1

巨大的感謝@Sasikanth。這是他幫助我的，並在下面提供全面幫助他人/將來的參考。

流星模板：

{{#each phoneNumber}} 
     <li> 
      <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here" value="{{number}}"> 
      <select id="sel_{{this._id}}" name="type"> 
      <!-- go through collection and see which is selected there, mark it as selected here so they match --> 
       <option value="Work">Work</option> 
       <option value="Home">Home</option> 
       <option value="Mobile">Mobile</option> 
       <option value="Office">Office</option> 
       <option value="Fax">Fax</option> 
       <option value="Other">Other</option> 
      </select> 
      {{setDropdownValue}} 
      <input id="{{this._id}}" type="button" class="remove" value="X"> 
     </li> 
    {{/each}} 

流星助手：

Template.addPhoneNumber.helpers({ 

    //the full list of phone numbers in the collection, so we can loop through them in the template and draw them into the form 
    'phoneNumber': function() { 
     return newOrgPhoneNumbers.find(); 
    }, 

    //This will take the value of the database item's "type" field and send it back to the select html element. 
    //It's using the sel_ prefix to separate it from the other items with the same id in the template so they don't receive the data by accident. 
    'setDropdownValue': function(){ 
    $("#sel_"+this._id).val(this.type); 
    } 

    }); 

Answer 2

取而代之的是

//let's us choose which of the dropdown items are selected 
    'selectedOrNot': function(event){ 

     var collectionType = newOrgPhoneNumbers.findOne(); //get the type from the collection (EG: Home, Mobile, Fax, etc) 
     var typeFormName = $('[name="selection"]').val(); //get the data from the form (EG: Home, Mobile, Fax, etc) 


     //When drawing the select dropdown, see if there's a match and return selected if so 
    if(collectionType.type === typeFormName){ 
     console.log ('selected!'); 
     return 'selected'; 
    } 

    } 

試試這個

//let's us choose which of the dropdown items are selected 
    'selectedOrNot': function(event){ 
     var typeFormName = $('[name="selection"]').val(); //get the data from the form (EG: Home, Mobile, Fax, etc) 


     //When drawing the select dropdown, see if there's a match and return selected if so 
    if(this.type === typeFormName){ 
     console.log ('selected!'); 
     return 'selected'; 
    } 
    } 

通過console.log

編輯

試試下面的代碼確保你獲得兩個正確的價值觀

{{#each phoneNumber}} 
     <li> 
      <input id="{{this._id}}" type="text" name="phoneNumberItem" placeholder="Phone number here" value="{{number}}"> 
      <select id="{{this._id}}" name="type"> 
      <!-- go through collection and see which is selected there, mark it as selected here so they match --> 
       <option value="Work">Work</option> 
       <option value="Home">Home</option> 
       <option value="Mobile">Mobile</option> 
       <option value="Office">Office</option> 
       <option value="Fax">Fax</option> 
       <option value="Other">Other</option> 
      </select> 
      {{setDropdownValue}} 
      <input id="{{this._id}}" type="button" class="remove" value="X"> 
     </li> 
    {{/each}} 

在助手

setDropdownValue: function(){ 
$("#"+this._id).val(this.type); 
}