如何从 meteor 的下拉列表中获取所选项目（lookback:dropdowns）

Question

说明

我正在制作一个小型网络应用程序来管理指导期间的一些学生，当他们在网络上注册时，我想设置他们的导师是谁。我正在使用 meteor 来实现这一点，并安装了 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。

我的尝试

我决定不 post 我尝试的代码，因为它无论如何都不起作用，而且可能有人更了解他们在做什么。 Meteor 对我来说相对较新，只有几个月，而且我不是全职开发人员，所以我必须在这里或在文档上学习所有内容。

我会说我确实尝试在 html 中使用回溯文档中的 dropdowns.get(name) 编写脚本，但我认为这不是该方法的意图（我可能误解了文档）。如果我能让它工作，我也将能够将 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

我解决了这个问题，完全没有偏离 lookback:dropdown 布局。看来我对jQuery不是很熟悉。无论如何，我将 post 我的代码放在这里以供更多人查看。

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
)

现在一切正常！

如何从 meteor 的下拉列表中获取所选项目（lookback:dropdowns）

How do I grab the selected item from a drop down list in meteor (lookback:dropdowns)

html

javascript

coffeescript

meteor

drop-down-menu