12

さて、バックボーンビューとイベントが発生しないことに関する他のいくつかの質問を読みましたが、それでも悲しいことにそれを取得していません。私は約1日バックボーンをいじっていたので、基本的なものが欠けていると確信しています。これが私が取り組んでいるものの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は、イベントが最初にバインドされたときに存在しないためだと思います。ビューに動的に構築されたイベントのバインドと発生をどのように処理する必要がありますか？（また、これは短い例ですが、他にすべきでないことをしている場合は、遠慮なく私に怒鳴ってください）

4

1 に答える 1

23

あなたの問題は、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要素は GridViewthis.elとthis.elis内に含まれている必要があります<div class="grid-view">。これに変更eventsした場合：

events: {
    'click': 'okay'
}

牛の声が聞こえます（または、この問題がどれほど狂ったかによって、アラートを読んだ後に「頭の中で牛の声が聞こえます」）。

固定フィドル: http://jsfiddle.net/ambiguous/5dhDW/

于 2011-09-25T00:46:26.010 に答える