javascript - 如何使 html 选择选项在 Meteor 中工作？

Question

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

这是一个示例，说明它如何与名为“国家/地区”的集合的按钮一起使用。

模板

{{#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 表单处理之前有任何想法吗？

谢谢 史蒂夫

Answer 1

在 Meteor 中，each 帮助程序调用 Meteor.ui.listChunk(请查看 packages/templating/deftemplate.js)，它将当前变量视为 this 上下文。

换句话说就是点击#country中的全局上下文，只能访问each block 下的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"));
 }