Backbone.js 主干1.0 js事件在.html（[内容]）之后仍然附加

我遇到的问题是，单击事件不断堆积（更改视图后仍然附加）。我已经修复了这个问题，只使用了视图的一个实例（如下所示）。我认为当标记被更改时，主干会删除事件。我对其他观点没有这个问题

代码错误：随着更多视图的创建，点击事件不断堆积在loadPlayerCard上

//Player Thumb View
PgaPlayersApp.PlayerThumbView = Backbone.View.extend({
    events: {
        'click': 'loadPlayerCard'
    },
    tagName: 'li',
    template: _.template( $('#player_thumb').html()),    
    render: function()
    {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    loadPlayerCard: function()
    {
        new PlayerCardView({model: this.model}).render();
        return false;
    }
});

//Router
var Router = Backbone.Router.extend({
    routes:{
      '': 'loadPlayers'
    },

    loadPlayers: function()
    {
        PgaPlayersApp.Players.fetch({reset: true, success: function()
        {
            //When players is first fetched, we want to render the first player into the card area
            new PlayerCardView({model: PgaPlayersApp.Players.first()}).render();

        }});
    }
});

PgaPlayersApp.Router = new Router();
Backbone.history.start();

修复代码：修复问题的代码：

PgaPlayersApp.CurrentPlayerCard = new PlayerCardView();

//Player Thumb View
PgaPlayersApp.PlayerThumbView = Backbone.View.extend({
    events: {
        'click': 'loadPlayerCard'
    },
    tagName: 'li',
    template: _.template( $('#player_thumb').html()),    
    render: function()
    {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    loadPlayerCard: function()
    {
        PgaPlayersApp.CurrentPlayerCard.model = this.model;
        PgaPlayersApp.CurrentPlayerCard.render();
        return false;
    }
});

//Router
var Router = Backbone.Router.extend({
    routes:{
      '': 'loadPlayers'
    },

    loadPlayers: function()
    {
        PgaPlayersApp.Players.fetch({reset: true, success: function()
        {
            //When players is first fetched, we want to render the first player into the card area
            PgaPlayersApp.CurrentPlayerCard.model = PgaPlayersApp.Players.first();
            PgaPlayersApp.CurrentPlayerCard.render();
        }});
    }
});

PgaPlayersApp.Router = new Router();
Backbone.history.start();

PlayerCardView（供参考）：

---

在路由器中，您不断创建新的

PlayerCardView

s:

new PlayerCardView({model: PgaPlayersApp.Players.first()}).render();

所有这些视图共享完全相同的

el

：

el: '#pga_player_card'

因此，您不断创建新的

PlayerCardView

s，并且每个卡都绑定到

#pga_player_卡

每次这样做时，都会将一个全新的视图绑定到完全相同的DOM元素，并且每个视图都会调用绑定事件处理程序。请注意，

delegateEvents

绑定到

el

，并且：

在用新内容替换子元素之前，从子元素中移除其他构造（如数据和事件处理程序）

因此

html

对

el

没有任何作用，但它将从子元素中删除事件处理程序。考虑这个简单的例子，用<代码> <代码>：

$（'d'）。在（'click'，function（）上{
log（'Before.html'）；
});
$（“#d'）.html（“煎饼屋在哪里？
”）；
$（'#d'）。在（'click'，function（）上{
log（'After.html'）；
});

如果然后单击

#d

，您将在控制台中看到before和after消息

演示：

这个简单的例子或多或少相当于你正在做的事情

如果您：

将视图放在

#pga_播放器卡

内，让路由器执行

$（“#pga_播放器卡”）。附加（view.render（）.el）

跟踪已经存在的视图，并在添加新视图之前将其删除（）

避免尝试为多个视图实例重用DOM元素，避免尝试重用视图，两者都不值得这么麻烦

el: '#pga_player_card'

$('#d').on('click', function() {
    console.log('Before .html');
});
$('#d').html('<p>Where is pancakes house?</p>');
$('#d').on('click', function() {
    console.log('After .html');
});