在Select2中使用Meteor.js时发生的本机“更改”事件？

Question

我正在使用Meet.js项目中大气中的select2包。但是，我无法在模板中对我的事件处理程序进行本机“更改”。我需要它来访问模板中的对象上下文。

当在select 2-选择框中更改select值时，这不会触发：

Template.myTemplate.events({
    'change .newValue' : function () {
        console.log("I am not fired :(");
        console.log("But I can access this. :)", this);
    }
}

然而，这确实有效。唯一的问题是我无法从模板中访问“此”上下文，这正是我所需要的。

Template.myTemplate.rendered({
    var self = this.data;
    $('.newValue')
    .select2()
    .on('change', function () {
        console.log("I am fired! :)");
        console.log("I can access self, and get the currently logged in user", self);
        console.log("But that is not what I want. :(");
    }
}

Answer 1

Select2将<select>标记重写为一系列<div>，因此您实际上没有一个可供本机事件处理程序获取的更改事件。

您可以做的是将模板数据的_id属性存储在select2元素的id中。您的变更监听器上的select2传递一个jQuery事件，并使用它的目标，您可以重新创建缺少的上下文。很丑但很管用。

编辑：

我的意思是将Mongo文档_id放到html元素id字段中，如下所示：

template.html

//...

{{#each dropdown}}
  <select id="{{_id}}" class="select2">
    {{#each options}}<option value="{{ serialNo }}">{{ name }}</option>{{/each}}
  </select>
{{/each}} 

//...

template.js

Template.template.rendered = function () {
  $('select2').select2({ 
    // ...
  }).on('change', function (e) {
    console.log(e.target);
  });

// ...

Template.template.dropdown = function () {
  return Dropdowns.find();
}

假设您的下拉文档类似于：

{
   "_id" : "7MzpRfzyCDTgz4QXJ",
   "name" : "dropdown1",
   "options" : [
                 { 
                   "serialNo" : 1,
                   "name"     : "Option 1"
                 } , {
                   "serialNo" : 2,
                   "name"     : "Option 2"
                 }
               ]
}