如何使 html 选择选项在 Meteor 中工作？答案

【问题标题】：How do I make the html select options work in Meteor?如何使 html 选择选项在 Meteor 中工作？
【发布时间】：2016-09-13 21:39:52
【问题描述】：

我无法让 HTML 选择选项按照我认为在 Meteor 中的工作方式工作。

这是一个示例，说明它如何与名为 Country 的集合的按钮一起使用。

模板

{{#each get_countries}}
  <button class="btn btnCountryTest">{{iso3}} - {{name}} </button><br />
{{/each}}

客户端事件处理程序

'click .btnCountryTest': function(event){
   console.log('clicked .btnCountryTest this._id: ' + this._id);
}

产生正确的输出，例如。

clicked .btnCountryTest this._id: 39cd432c-66fa-48de-908b-93a874323e2e

现在，我希望能够在从 HTML 选择选项下拉列表中选择项目时触发其他页面活动。我知道我可以将 ID 放在选项值中，然后使用 Jquery 等......我认为它可以与 Meteor “一起工作”，但我不知道该怎么做。

这是我正在尝试的，但它不起作用。

模板

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}">{{name}}</option>
  {{/each}}
</select>

处理程序

'click #country': function (event) { 
  console.log('Template.users_insert.events click .country this._id: ' + this._id);
 }

哪个产生

Template.users_insert.events click .country this._id: undefined

显然不是我所期望的。在我求助于 Jquery 表单处理之前有任何想法吗？

谢谢史蒂夫

【问题讨论】：

标签： javascript meteor

【解决方案1】：

在 Meteor 中，each 助手调用 Meteor.ui.listChunk（请查看 packages/template/deftemplate.js），它将当前变量视为 this 上下文。

换句话说，它是click #country 中的全局上下文，您只能在each 块下访问this._id，就像在click #country option 事件中一样。

我认为您可以将数据放在 HTML 数据属性中，并使用 jQuery 访问它。就这样——

模板

<select class="input-xlarge country" id="country" name="country">
  {{#each get_countries}}
    <option value="{{iso3}}" data-id={{_id}}>{{name}}</option>
  {{/each}}
</select>

手柄

'click #country': function (event) { 
  console.log('Template.users_insert.events click .country this._id: ' + $(event.currentTarget).find(':selected').data("id"));
 }

【讨论】：

【解决方案2】：

如果您尝试访问数据上下文，您需要让您的事件处理程序访问template 参数，并使用它的data 对象。那是顶级数据上下文。

'click #country': function (event, template) { 
    console.log('Template.users_insert.events click .country _id: ' + template.data._id);
}

应该可以。这是我能找到的最好的文档：http://docs.meteor.com/#template_data

【讨论】：

【解决方案3】：

@StevenCannon，我遇到了类似的问题并在这里找到了解决方案 - http://www.tutorialspoint.com/meteor/meteor_forms.htm。 @DenisBrat 是正确的，监听 change 事件而不是 click 事件。

这是为您修改的解决方案：

'change select'(event) {
    // Prevent default browser form submit
    event.preventDefault();

    var selectedCountry = event.target.value;

    console.log('Template.users_insert.events change select iso3: ' + selectedCountry);
}

【讨论】：

【解决方案4】：

您正在监听选择的“点击”事件。您真的很想订阅“更改”事件。当您单击 html 元素时会发生“单击”。另一方面，在您从列表中选择一个值后会触发“更改”事件。

【讨论】：

【解决方案5】：

也许您还可以查看“packages/liveui/liveui.js”。有一个findEventData 函数，它给出了回调this 对象。

【讨论】：