3

我无法让 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 表单处理之前，有人有什么想法吗？

谢谢斯蒂夫

4

5 回答 5

5

在 Meteor 中，each助手调用Meteor.ui.listChunk（请查看 packages/template/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"));
 }
于 2012-08-14T03:32:57.107 回答
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

于 2014-02-19T00:31:34.637 回答
2

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

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

'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);
}
于 2016-09-13T13:39:52.107 回答
1

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

于 2014-05-10T20:25:39.693 回答
0

也许你也可以看看'packages/liveui/liveui.js'。有一个findEventData函数，它给出回调this对象。

于 2012-08-14T03:49:40.047 回答