javascript - backbone.js 事件和 el

Question

好的，所以我已经阅读了其他几个关于 Backbone View 和事件未被触发的问题，但我仍然没有得到它。我已经和 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);

GridView 上的 okay 事件没有触发，我假设是因为当事件首次绑定(bind)时 div.grid-view 不存在。我应该如何动态处理基于 View 构建的事件的绑定(bind)和触发？ (此外，这是一个简短的示例，但如果我做了其他不该做的事情，请随时对我大喊大叫)

Answer 1

您的问题是 GridView 上的事件:

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

说:

when you click on a descendent that matches '.grid-view', call okay

事件与此 snippet from backbone.js 绑定(bind):

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

您会听到奶牛的声音(或在阅读警报后“在脑海中听到它们”，这取决于这个问题让您有多疯狂)。

固定 fiddle :http://jsfiddle.net/ambiguous/5dhDW/