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中的模板。

我的尝试

我决定不发布我尝试的代码，因为它无论如何都没有工作，并且可能有人知道他们正在做什么。流星对我来说相对较新，仅仅几个月，我不是一个全职开发者，所以我必须在这里或在文档上学习所有内容。

我会说我确实尝试用回溯文档中的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
)

现在一切正常！

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

2 个答案: