バックボーン - 選択された要素で発生しなかったイベントが変更されました

Question

私はBackbone.Viewからドロップダウンリストを生成しています。
DOMにアタッチした後、変更イベントは発生しません。 delegateEventsはそれを修正しません。誰かが私に盲点がどこにあるか教えてもらえますか？

モデルとコレクション：

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); 
     } 
    }); 

再生回数：

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'); 
     } 
    }); 

レンダリング：CollectionView上

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

tagNameとattributes：

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

elは<select class="rangesList">となります。しかし、あなたのevents：

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

は内部.rangesListから'change'イベントビューのelを聞いています。 fine manual：

イベントは{"event selector": "callback"}の形式で書き込まれます。 [...]セレクタを省略すると、イベントはビューのルート要素（this.el）にバインドされます。

したがって、存在しないものからイベントをリスンしようとしています。あなたは、ビューのelから直接イベントをリッスンしたい場合は、セレクタ除外：

events: { 
    'change': 'onRangeChanged' 
}