骨幹 - 事件沒有發生在選定元素髮生變化

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

渲染：

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上CollectionView：

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

說那el將是<select class="rangesList">。但是你的events：從.rangesList

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

正在聽'change'事件裏面視圖的el。來自fine manual：

事件的格式爲{"event selector": "callback"}。 [...]忽略選擇器會將事件綁定到視圖的根元素（this.el）。

所以你試圖從不存在的東西來聽事件。如果您想直接從監聽事件視圖的el然後離開了選擇：

events: { 
    'change': 'onRangeChanged' 
}