Question

我在Meteor.js项目中使用大气中的select2包。但是我无法在模板中获得对事件处理程序的本机“更改”。我需要这个来访问模板中的对象上下文。

更改Select2选择框中的选择值时不会触发：

Template.myTemplate.events({
    'change .newValue' : function () {
        console.log("I am not fired :(");
        console.log("But I can access this. :)", 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> s，因此您实际上没有要获取的本机事件处理程序的更改事件。

您可以做的是将模板数据的_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"
                 }
               ]
}

在Meteor.js中使用Select2时的原生'更改'事件？

1 个答案: