Native 'change' event when using Select2 in Meteor.js? - meteor

Question

I am using the select2 package from atmosphere in my Meteor.js-project. I am however unable to get the native 'change' to my event-handler in the template. I need this to access the object context in the template.
This does not fire when changing the select value in a Select2-select box:
Template.myTemplate.events({
'change .newValue' : function () {
console.log("I am not fired :(");
console.log("But I can access this. :)", this);
}
}
This, however, does work. The only problem is that I can't access the "this" context from the template, which is what I need.
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 rewrites the <select> tag into a series of <div>s, so you don't actually have a change event for the native event handler to grab.
What you could do is stash the _id property of your template data in the id of your select2 element. Your select2 on change listener passes a jQuery event and using it's target you can recreate the missing context. It's ugly but works.
Edit:
What I mean is put the Mongo document _id into the html element id field, like so:
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();
}
Assuming your dropdown document was something like:
{
"_id" : "7MzpRfzyCDTgz4QXJ",
"name" : "dropdown1",
"options" : [
{
"serialNo" : 1,
"name" : "Option 1"
} , {
"serialNo" : 2,
"name" : "Option 2"
}
]
}