如何让html选项在Meteor中运行？

Question

我无法获得HTML Select Options以我认为它应该在Meteor中工作的方式工作.

下面是一个如何使用名为Countries的集合按钮的示例.

模板

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

谢谢Steeve

Answer 1

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

换句话说,它是全局上下文click #country,您只能this._id在each块下访问,就像在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"));
 }