ItemView events not Triggering - backbone.js

Question

What i want to do:
Render a select dropdown with option tags inside, and when user selects an option in the dropdown, get the newly selected model and do stuff with it.
Problem:
I'm having a hard time to get the change event to be triggered in an ItemView that's been called through a CompositeView.
For some reason the CompositeView:change (log: holy moses) is being triggered, however it doesn't help me much, since it won't give me the selected model.
I've tried a ton of stuff but nothing really worked.
any help would be greatly appreciated!
code:
Configurator.module('Views.Ringsizes', function(Views, Configurator, Backbone, Marionette, $, _) {
Views.DropdownItem = Marionette.ItemView.extend({
tagName: 'option',
template: "#dropdown-item",
modelEvents: {
'change': 'modelChanged'
},
onRender: function(){
console.log('tnt');
this.$el = this.$el.children();
this.setElement(this.$el);
},
modelChanged: function(model) {
console.log("holy mary");
}
});
Views.DropdownView = Marionette.CompositeView.extend({
template: "#dropdown-collection",
className: 'configurator-ringsizes-chooser',
itemView: Views.DropdownItem,
itemViewContainer: '.product_detail_ring_sizes',
events: {
"change": "modelChanged"
},
initialEvents: function(){},
initialize: function(){
console.log(this.model);
this.collection = new Backbone.Collection(this.model.getRingsizes());
},
modelChanged: function(model) {
console.log("holy moses");
}
});
Views.List = Marionette.CollectionView.extend({
className: 'configurator-ringsizes',
itemView: Views.DropdownView
});
});
template code: (if needed)
<script type="text/template" id="dropdown-item">
<option value="<#- code #>" <# if(current) { #> selected="selected" <#}#> ><#- name #> </option>
</script>
<script type="text/template" id="dropdown-collection">
<div class="accordionContent accordionContent_ringsizes">
<div class="configurator-ringsizes-chooser-ringsizes-region">
<select class="product_detail_ring_sizes"></select>
</div>
</div>
</script>

Answer 1

A "change" event won't trigger on a option when you select it, instead it will fire on the select when you change the choosen option (that's why it triggers on the composite view).
So you should use this in your itemView:
events: {
'click' : 'modelChanged'
}

Answer 2

Okay, i finally got this to work.
I'm a bit dissapointed that i have to rely on a data- attribute for this,
but this is the only way i found. took me long enough already :)
Here's how i did it now:
Template code:
<script type="text/template" id="dropdown-item">
<option data-cid="<#- cid #>" value="<#- code #>" <# if(current) { #> selected="selected" <#}#> ><#- name #></option>
</script>
<script type="text/template" id="dropdown-collection">
<div class="configurator-ringsizes-chooser-ringsizes-region">
<select class="product_detail_ring_sizes"></select>
</div>
</script>
Code:
Configurator.module('Views.Ringsizes', function(Views, Configurator, Backbone, Marionette, $, _) {
Views.DropdownItem = Marionette.ItemView.extend({
tagName: 'option',
template: "#dropdown-item",
serializeData: function() {
var data = {
cid: this.model.cid,
code: this.model.get('code'),
name: this.model.get('name'),
current: this.model.get('current')
};
return data;
},
onRender: function(){
this.$el = this.$el.children();
this.setElement(this.$el);
}
});
Views.DropdownView = Marionette.CompositeView.extend({
template: "#dropdown-collection",
className: 'configurator-ringsizes-chooser',
itemView: Views.DropdownItem,
itemViewContainer: '.product_detail_ring_sizes',
events: {
"change select": "modelChanged"
},
initialEvents: function(){},
initialize: function(){
this.collection = new Backbone.Collection(this.model.getRingsizes());
},
modelChanged: function(e) {
var cid = $(e.currentTarget+"option:selected").data('cid');
var currentModel = this.collection.find(function(elem) {
return elem.get('current');
});
var model = this.collection.find(function(elem) {
return elem.cid === cid;
});
currentModel.set({
current: false
});
model.set({
current: true
});
// AND here i'm doing my stuff, getting the overall model through this.model, the collection of options through this.collection and the currently selected model through currentModel.
}
});
Views.List = Marionette.CollectionView.extend({
className: 'configurator-ringsizes',
itemView: Views.DropdownView,
model: this.model
});
});