События backbone.js и el - PullRequest
Новая
       28

События backbone.js и el

12 голосов
/ 25 сентября 2011

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

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

1 Ответ

23 голосов
/ 25 сентября 2011

Ваша проблема в том, что события в GridView: 

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

говорят:

при нажатии на потомок , который соответствует '.grid-view',call 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/

...