如何将事件绑定到动态创建的骨干中的'el'？

我在使用骨干网动态创建元素时遇到了一些故障绑定事件。如何将事件绑定到动态创建的骨干中的'el'？

以下是生成元素的骨干视图的代码。（“.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();

这里是控制动态创建的元件的视图：

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

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

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

时遇到的问题是，其控制所述动态创建的元件的视图（ModalView）不是绑定到那个动态元素的事件。（'.modal'）

如何将元素绑定到骨干中动态创建的'el'？

我已经看过了以下解决方案：

Backbone Dynamically created 'el' not binding events

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

但我仍然似乎无法弄清楚如何将事件附加到动态元素。

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

来源

2013-02-15 Dennis Martinez

为什么不在'makeModal'方法中创建'ModalView'？因为那么你的关闭将工作http://jsfiddle.net/6wzzk/4/。对于我来说，一个名为'makeModal'的方法听起来就像创建ModalView的正确位置。 – nemesv 2013-02-15 21:47:59

@nemesv这似乎是对我来说最好的解决方案。你应该将其作为答案发布...... – elevine 2013-02-15 21:52:49

当您实例化一个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的创建应该是MakeModalView责任，并且在makeModal方法中这样做听起来就像是正确的做法。

来源

2013-02-15 21:58:40 nemesv

哈，这永远不会超出我的想法。谢谢！ – 2013-02-15 22:00:17

您也可以在视图的'initialize'函数中或甚至在'render'例程中创建动态'el'-ement。看起来更清洁。 – 2013-02-15 22:11:41

如何将事件绑定到动态创建的骨干中的'el'？

回答

相关问题