2

バックボーンを使用して動的に作成された要素にイベントをバインドするのに問題があります。

要素を生成したバックボーンビューのコードは次のとおりです。（'。モーダル'）

var MakeModalView = Backbone.View.extend({
      el: '#btn-make-modal',

    events: {
        'click': 'makeModal'
    },

    makeModal: function () {
        $('body').html('<div class="modal"><div class="modal-close">&times;</div>Close me! I\'m a modal!</div>');
    }
});
new MakeModalView();

動的に作成された要素を制御するビューは次のとおりです。

var ModalView = Backbone.View.extend({
    el: '.modal',

    events: {
        'click .modal-close': 'closeModal'
    },

    closeModal: function () {
        this.$el.remove();
    }
});
new ModalView();

私が抱えている問題は、動的に作成された要素（ModalView）を制御するビューが、その動的要素にイベントをバインドしていないことです。（'。モーダル'）

バックボーンで動的に作成された「el」に要素をバインドするにはどうすればよいですか？

私は次の解決策を見てきました：

バックボーン動的に作成された「el」イベントをバインドしない

動的に作成された「el」を使用してバックボーンビューをどのように作成しますか？

しかし、動的要素にイベントをアタッチする方法をまだ理解していないようです。

この動作がどのように機能するかを示すために、フィドルを作成しました。http://jsfiddle.net/6wzzk/3/

4

1 に答える 1

2

Backbone.View をインスタンス化すると、Backbone はそれを取得elしてイベント サブスクリプション (委任) を実行しようとします。そのためel、まだ DOM にない場合、イベントは発生しません。

あなたの場合、makeModalメソッドを使用してモデルを作成しているため、そこに作成を移動するだけModalViewです:

makeModal: function () {
    $('body').html('<div class="modal"><div class="modal-close">&times;</div>');
    new ModalView();
}

JSFiddleを更新しました。

とにかく、の作成は責任を負うModalViewべきであり、メソッドでそれを行うのは、それを行うのに適切な場所のように思えます。MakeModalViewmakeModal

于 2013-02-15T21:58:40.720 に答える