backbone - 未在所选元素上触发的事件已更改

Question

我正在从 Backbone.View 生成下拉列表。
将其附加到 DOM 后，不会触发 change 事件。 delegateEvents 没有修复它。谁能告诉我盲点在哪里？

型号和collection:

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:

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

正在监听 .rangesList 视图 el 中的 'change' 事件。来自 fine manual:

Events are written in the format {"event selector": "callback"}. [...] Omitting the selector causes the event to be bound to the view's root element (this.el).

所以您正在尝试从不存在的事物中监听事件。如果您想直接从视图的 el 中监听事件，则省略选择器：

events: {
    'change': 'onRangeChanged'
}

backbone - 未在所选元素上触发的事件已更改

backbone - event not fired on selected element changed

javascript

jquery

backbone.js