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

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 分离到单独的模板中以独立管理它们（在应用程序中添加和删除名称等）。

如果需要更多信息，请告诉我！

提前感谢您帮助我解决这个问题。我知道学生和导师都会喜欢这个网络应用程序，因此感谢您帮助它运行:)

编辑（我的新代码）：

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

我解决了这个问题，而完全不必偏离回顾：下拉布局。看来我对 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
)

现在一切正常！