Backbone: 将事件附加到this.$el 并重新渲染导致绑定多个事件

Question

我需要将事件附加到主视图元素 this.$el。在这种情况下，它是一个 'LI'。然后我有时需要重新渲染这个视图。问题是如果我重新渲染它，它会在每次渲染时附加 onRender 方法中附加到 this.$el 的任何事件。因此，如果我调用 this.render() 3 次，处理程序将被附加 3 次。但是，如果我将事件附加到 this.$el 的子节点，则不会发生这种情况，并且事件似乎会自动取消委托并在每次渲染时重新添加。问题是在这种情况下我需要使用主要的 this.$el 元素。

这是一个错误吗？ this.$el 的功能不应该像 childNodes 那样吗？我不应该在 this.$el 上附加东西吗？

视图内部：

onRender: function(){
    this.$el.on('click', function(){
    // do something
});

Answer 1

如果您可以use the view's event hash，您可以执行以下操作：

var Bookmark = Backbone.View.extend({
    events: {
        'click': function() {
            console.log('bound once')
        }
    }
    ...});

如果出于某种原因这不是一个选项，您可以 explicitly remove any existing event listeners for this event in the render method，这将防止监听器被多次附加：

var Bookmark = Backbone.View.extend({
    ...
    render: function(x) {
        this.$el.off('click.render-click');
        this.$el.html(this.template());
        this.$el.on('click.render-click', function () { 
            console.log('only ever bound once');
        });
        return this;
    }
});

Backbone: 将事件附加到this.$el 并重新渲染导致绑定多个事件

Backbone: Attaching event to this.$el and re rendering causes multiple events to be bound

events

backbone.js