如何從流星的下拉列表中獲取所選項目（回溯：下拉列表）

Question

說明

我正在制作一個小型網絡應用程序，以在指導期間管理一些學生，當他們在網絡上注冊時，我想設置其指導者是誰。 我正在使用流星來完成此操作，並安裝了lookback：dropdowns以使反應性DDL（下拉列表）填充有一些名稱。 注意：DDL實際上可以正常工作並按預期填充名稱。 這不是問題。

題

我怎么知道用戶在DDL中選擇的值，以便我可以更改按鈕上的文本，以便管理員知道他們在頁面上移動時選擇的內容以及以后使用選擇來管理學生？

的HTML

<template name="aTemplate">
...some stuff up here thats not important..


<td class="text-center vertical-align">{{#dropdownTrigger name="undergraduateDDL"}}<button id="undergraduateID">Select</button>{{/dropdownTrigger}}
        {{#dropdown name="undergraduateDDL"}}<ul>
        {{#each Undergraduates}}
          <li role="menuItem"><a href="#">{{this}}</a></li>
        {{/each}}
      </ul>{{/dropdown}}</td>

...some more DDLs that would behave the same as the one above and some other stuff..
</template>

CoffeeScript（幫助程序和事件偵聽器等。）

Template.aTemplate.helpers(

  Undergraduates: ["Some Student"]

  hasInvites: ->
    getInvites = Invites.find({invited: false}, {fields: "_id": 1, "invited": 1}).count()
    if getInvites > 0 then true else false

  invites: ->
    Invites.find({invited: false}, {sort: {"requested": 1}}, {fields: {"_id": 1, "inviteNumber": 1, "requested": 1, "email": 1, "invited": 1}})


)

Template.aTemplate.events(
...some stuff about invitations and email requests..
)

如果您有興趣，可以使用Meteor Chef的模板。

我的嘗試

我決定不發布我嘗試的代碼，因為它仍然無法正常工作，並且可能有人更了解他們在做什么。 Meteor對我來說還比較陌生，只有幾個月了，我不是一個全職的開發人員，所以我必須在這里或在文檔上學習一切。

我會說我確實嘗試使用回溯文檔中的dropdowns.get（name）在html中創建腳本，但是我不認為這是該方法的目的（我可能誤解了文檔）。 如果我可以執行此操作，那么我也可以將DDL分離到單獨的模板中，以獨立地管理它們（從應用程序中添加和刪除名稱等）。

如果需要更多信息，請告訴我！

預先感謝您幫助我解決此問題。 我知道所有的學生和輔導員都會感謝這個Web應用程序，因此感謝您為使它投入使用而提供的幫助：）

編輯（我的新代碼）：

的HTML

<template name="UGMentors">
  {{#dropdownTrigger name="UGMentorsDDL"}}
    <button>{{this.buttonText}}</button>
    {{/dropdownTrigger}}
    {{#dropdown name="UGMentorsDDL"}}
    <ul id="selector">
    {{#each Undergraduates}}
      <li role="menuItem"><a href="#">{{this}}</a></li>
    {{/each}}
  </ul>
  {{/dropdown}}
</template>

CoffeeScript

Template.UGMentors.helpers(
  Undergraduates: ["Some Student"]
)

Template.UGMentors.created = ->
  @data.buttonText = 'Assign'
  return


Template.UGMentors.events(
    'click #selector': (event, Template) ->
        event.preventDefault()
        #Get the value of the selected text
        selected_value = $(event.target).text()
        alert("Undergraduate: " + selected_value)
        Template.data.buttonText = selected_value
        alert("I made it past line 16!")
        return
)

注意：唯一與此代碼不兼容的事情是更新按鈕文本。 回到原來的問題。 CoffeeScript中的兩個警報可以正常工作，但是Template.data.buttonText = selected_value實際上並沒有更改按鈕文本。

Answer 1

要從模板項中獲取選定的值-您可以使用jQuery進行大量幫助。

更改按鈕上的文本的一種簡單方法：將值設置為模板中的值

<template name='buttonDropdown'>
  <button>{{this.buttonText}}</button>
  <select id="selector">
    <option value=''>Select an undergrad</option>
    {{#each Undergraduates}}
      <li role="menuItem"><a href="#">{{this}}</a></li>
    {{/each}}
  </select>
</template>

Template.buttonDropdown.created = function() {
  this.data.buttonText = '';
}

Template.buttonDropdown.events({
  'change #selector': function(event, template) {
    event.preventDefault();
    // Get the value of this item
    var selected_value = $(event.target).val();
    template.data.buttonText = selected_value;
  }
});

使用這種方法，所有內容都非常緊密地綁定到模板中，不會泄漏到其他任何地方。

Answer 2

我解決了這個問題，而根本不必偏離lookback：dropdown布局。 看來我對jQuery並不那么熟悉。 無論如何，我將在這里發布我的代碼以供更多參考。

的HTML

<template name="UGMentors">
  {{#dropdownTrigger name="UGMentorsDDL"}}
    <button id="UGMButton">{{this.buttonText}}</button> <!-- add an id to the button -->
    {{/dropdownTrigger}}
    {{#dropdown name="UGMentorsDDL"}}
    <ul id="selector"> <!-- The selector is actually the ul -->
    {{#each Undergraduates}}
      <li role="menuItem"><a href="#">{{this}}</a></li>
    {{/each}}
  </ul>
  {{/dropdown}}
</template>

CoffeeScript控制器

#Populates the DDL 
Template.UGMentors.helpers(
  Undergraduates: ["Some Student"]
)

#Creates the button with default text 'Assign'
Template.UGMentors.created = ->
  @data.buttonText = 'Assign'
  return

#Change to click instead of select (because I am no longer using <select></select>)
Template.UGMentors.events(
#Most of this is from @Flanamacca 
    'click #selector': (event, Template) ->
        event.preventDefault()
        #Get the value of the selected text
        selected_value = $(event.target).text()
        #Below is how I actually changed the button text
        $("#UGMButton").html(selected_value);
        return
)

現在一切正常！