Событие связывания с магистралью срабатывает несколько раз

Я пытаюсь создать переключающееся представление с помощью backbone js и обнаружил, что мое событие связывания срабатывает несколько раз, когда я переключаю представление несколько раз.

Ниже приведен код для лучшей иллюстрации:

html

    halo world


red view
blue view

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("
Click Me
");            
    }
});

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

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

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

Если щелкнуть красный вид 3 раза и нажать «щелкни меня». Это будет всплывающее предупреждение в 3 раза, а также. Я подозреваю, что нужно где-то отвязать событие, но не смог найти правильный способ сделать это. Лучше всего предоставить несколько ссылок, чтобы сделать это правильно.

Вот ссылка на демонстрацию jsfiddle. http://jsfiddle.net/mochatony/DwRRk/31/