backbone.js事件和el

Question

好的,所以我已经阅读了几个关于Backbone视图和未被触发的事件的其他问题,但是我仍然没有忘记它.我一直在乱用Backbone大约一天,所以我肯定我错过了一些基本的东西.这是我正在使用的jsfiddle:http: //jsfiddle.net/siyegen/e7sNN/3/

(function($) {

    var GridView = Backbone.View.extend({
        tagName: 'div',
        className: 'grid-view',
        initialize: function() {
            _.bindAll(this, 'render', 'okay');
        },
        events: {
            'click .grid-view': 'okay'
        },
        okay: function() {
            alert('moo');
        },
        render: function() {
            $(this.el).text('Some Cow');
            return this;
        }
    });

    var AppView = Backbone.View.extend({
        el: $('body'),
        initialize: function() {
            _.bindAll(this, 'render', 'buildGrid');
            this.render();
        },
        events: {
            'click button#buildGrid': 'buildGrid'
        },
        render: function() {
            $(this.el).append($('<div>').addClass('gridApp'));
            $(this.el).append('<button id="buildGrid">Build</button>');
        },
        buildGrid: function() {
            var gridView = new GridView();
            this.$('.gridApp').html(gridView.render().el);
        }

    });

    var appView = new AppView();

})(jQuery);

okayGridView上的事件不会触发,我假设因为div.grid-view事件首次绑定时不存在.我该如何处理动态构建在视图上的事件的绑定和触发？(另外,这是一个简短的例子,但如果我做其他任何我不应该做的事情,请随意对我大喊大叫)

Answer 1

你的问题是GridView上的事件:

events: {
    'click .grid-view': 'okay'
}

说:

当你点击匹配的后代时'.grid-view',请致电okay

事件与此片段backbone.js绑定:

if (selector === '') {
  this.$el.on(eventName, method);
} else {
  this.$el.on(eventName, selector, method);
}

所以.grid-view元件必须被包含在你的GridView的this.el和你this.el的<div class="grid-view">.如果你改变你的意思events:

events: {
    'click': 'okay'
}

你会听到你的奶牛(或者在阅读警报后"在脑海中听到它们",这取决于这个问题对你造成多么疯狂).

固定小提琴:http://jsfiddle.net/ambiguous/5dhDW/