如何从流星的下拉列表中获取所选项目（回溯：下拉列表）

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
)

现在一切正常！