Backbone - Ereignis nicht ausgelöst am ausgewählten Element geändert

Question

Ich erstelle eine Dropdown-Liste von Backbone.View.
Nach dem Anhängen an das DOM wird das Ereignis change nicht ausgelöst. Die delegateEvents repariert es nicht. Kann mir jemand zeigen, wo der blinde Fleck ist?

Modell und Sammlung:

App.Models.DictionaryItem = Backbone.Model.extend({ 
     default: { 
      key: '', 
      value: '', id: 0 
     } 
    }); 

    App.Collections.Dictionary = Backbone.Collection.extend({ 
     model: App.Models.DictionaryItem, 
     initialize: function (models, options) { 

     }, 
     parse: function (data) { 
      _.each(data, function (item) { 
      // if(item){ 
       var m = new App.Models.DictionaryItem({ key: item.code, value: item.name }); 
       this.add(m); 
      // } 
      }, this); 
     } 
    }); 

Aufrufe:

App.Views.ItemView = Backbone.View.extend({ 
     tagName: 'option', 
     attributes: function() { 
      return { 
       value: this.model.get('key') 
      } 
     }, 
     initialize: function() { 
      this.template = _.template(this.model.get('value')); 
     }, 
     render: function() { 
      this.$el.html(this.template()); 
      return this; 
     } 
    }); 

    App.Views.CollectionView = Backbone.View.extend({ 
     tagName: 'select', 
     attributes: { 
      'class': 'rangesList' 
     }, 
     events: { 
      'change .rangesList': 'onRangeChanged' 
     }, 
     initialize: function (coll) { 
      this.collection = coll; 
     }, 
     render: function() { 
      _.each(this.collection.models, function (item) { 
       this.$el.append(new App.Views.ItemView({ model: item }).render().el); 
      }, this); 
      // this.delegateEvents(this.events); 
      return this; 
     }, 
     selected: function() { 
      return this.$el.val(); 
     }, 
     onRangeChanged: function() { 
      alert('changed'); 
     } 
    }); 

Rendering:

var coll = new App.Collections.Dictionary(someData, { parse: true }); 
var v= new App.Views.CollectionView(coll); 
var vv=v.render().el; 

// new App.Views.CollectionView(coll).render().el; 
$('body').append(vv) 

Answer 1

Die tagName und attributes auf CollectionView:

tagName: 'select', 
attributes: { 
    'class': 'rangesList' 
}, 

sagen, dass die el wird <select class="rangesList"> sein. Aber Ihre events:

events: { 
    'change .rangesList': 'onRangeChanged' 
}, 

hören zu 'change' Ereignisse aus einer .rangesListinnerhalb die el Sicht. Von den fine manual:

Ereignisse im Format {"event selector": "callback"} geschrieben werden. [...] Durch das Weglassen des Selektors wird das Ereignis an das Stammelement der Ansicht gebunden (this.el).

Sie versuchen also, auf Ereignisse von etwas zu hören, das nicht existiert. Wenn Sie möchten, für Veranstaltungen hören direkt aus der Sicht des el dann den Wähler auslassen:

events: { 
    'change': 'onRangeChanged' 
}