javascript - 主干绑定(bind)事件多次触发

Question

我正在尝试使用 backbone js 构建一个切换 View ，当我切换 View 几次时，发现我的绑定(bind)事件被触发了多次。

下面是更好说明的代码:

html

<div id='container'>
    halo world
</div>

<button id='but1'>red view</button>
<button id='but2'>blue view</button>

CSS

#red_view{
    width:400px;
    height:400px;
    background-color:red;        
}
#blue_view{
    width:400px;
    height:400px;
    background-color:blue;        
}
.button,.button2{
    width:300px;
    height:300px;
    background-color:gray;
}

javascript

RedView = Backbone.View.extend({
    el: "#container",
    events:{"click .button":"clickme"},
    clickme:function(){
        alert('redview');                        
    },
    initialize: function(){
        this.$el.html("<div id='red_view'><div class='button'>Click Me</div></div>");            
    }
});

BlueView = Backbone.View.extend({
    el: "#container",
    events:{"click .button2":"clickme2"},
    clickme2:function(){
        alert('blueview');                        
    },    
    initialize: function(){
        this.$el.html("<div id='blue_view'><div class='button2'>Click Me</div></div>");            
    }
});

$(document).ready(function(){
    //var router = new SystemRouter();

    $('#but1').click(function(){
       var view = new RedView();
    });
    $('#but2').click(function(){
       var view = new BlueView();
    });    
});

如果您点击红色 View 3 次，然后按“点击我”。它也会弹出警报 3 次。我怀疑需要在某处取消绑定(bind)事件，但找不到正确的方法来做到这一点。最好提供一些正确执行此操作的引用。

这是 jsfiddle 演示的链接。 http://jsfiddle.net/mochatony/DwRRk/31/

Answer 1

每次单击红色 View 或蓝色 View 按钮时，您每次都会创建一个新的红色或蓝色 View 。您绑定(bind)它们的事件散列以响应源自具有类 button 和 button2 的按钮的单击 DOM 事件。

1. 按“红色 View ”3 次 -> 已创建 3 个 RedView 实例
2. 单击类为“button”的按钮 -> DOM 事件
3. 3 个 RedView 实例监听所述 DOM 事件 -> 3 个警报

这是因为您在创建新 View 之前没有清理 View ，这会有效地留下对事件做出响应的幽灵 View ，即使它们是看不见的。 (More info on the events hash)您可以使用类似这样的方法从您的 View 中清除事件。

cleanup: function() {
  this.undelegateEvents();
  $(this.el).clear();
}

这是您清理 View 的小工具 http://jsfiddle.net/DwRRk/34/

还有一个良好实践的提示:您应该使用诸如渲染方法之类的东西将内容附加到您的 DOM，使用初始化来初始化 View 所需的值。