Backbone.js события и el

Хорошо, поэтому я прочитал несколько других вопросов, касающихся просмотров и событий на макете, которые меня не уволили, однако я до сих пор не печатаю. Я уже несколько дней возился с 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);

Событие okay в GridView не срабатывает, я предполагаю, потому что div.grid-view не существует, когда событие сначала связано. Как я должен обрабатывать привязку и запуск события, которое построено на представлении динамически? (Кроме того, это короткий пример, но не стесняйтесь кричать на меня, если я делаю что-нибудь еще, что я не должен)

Ответы

Ответ 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/