javascript - 如何将事件绑定(bind)到动态创建的主干中的 'el'？

Question

我在使用主干将事件绑定(bind)到动态创建的元素时遇到一些问题。

这是生成元素的主干 View 的代码。 ('.modal')

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();

这是控制动态创建的元素的 View :

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

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

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

我遇到的问题是控制动态创建的元素(ModalView)的 View 没有将事件绑定(bind)到该动态元素。 ('.modal')

如何将元素绑定(bind)到主干中动态创建的“el”？

我查看了以下解决方案:

Backbone Dynamically created 'el' not binding events

How do you create Backbone views with an 'el' that was dynamically created?

但我似乎仍然不知道如何将事件附加到动态元素。

我创建了一个 fiddle 来演示这种行为是如何工作的。 http://jsfiddle.net/6wzzk/3/

Answer 1

当您实例化 Backbone.View 时，Backbone 会尝试获取其 el 并执行事件订阅(委托(delegate))。因此，如果 el 不在 DOM 中，则事件不会触发。

在您的情况下，因为您正在使用 makeModal 方法创建模型，只需将 ModalView 创建移动到那里:

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

已更新JSFiddle .

无论如何，ModalView 的创建应该是 MakeModalView 的责任，并且在 makeModal 方法中执行此操作听起来是正确的位置.