Собственное событие 'change' при использовании Select2 в Meteor.js?

Question

Я использую пакет select2 из атмосферы в моем проекте Meteor.js. Однако я не могу получить собственное "изменение" моего обработчика событий в шаблоне. Мне это нужно для доступа к контексту объекта в шаблоне.

Это не срабатывает при изменении значения select в поле Select2-select:

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, так что на самом деле у вас нет события change для обработки обработчиком событий.

Что вы могли бы сделать, это спрятать _id свойство данных вашего шаблона в id вашего элемента select2. Ваш слушатель select2 on change передает событие jQuery, и, используя его цель, вы можете воссоздать отсутствующий контекст. Это некрасиво, но работает.

Редактировать:

Я имею в виду, поместив Mongo-документ _id в поле идентификатора элемента html, вот так:

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"
                 }
               ]
}