Events 主干重复事件

我刚刚开始学习主干，刚刚注意到代码中有一个bug，但我不知道如何解决它

每次在ControlView中单击按钮时，它都会加载与该按钮单击关联的视图。伟大的但是，如果您单击一个按钮（#按钮-1），单击相邻的按钮（#按钮-2），然后再次单击第一个按钮（#按钮-1）-我们现在将有该视图的两个实例，这当然会导致重复事件。这意味着每次我在该视图中提交表单时，都会收到n+2个HTTP请求

我已经修改了我的代码，以便在第一次初始化时创建视图，然后在每次需要时呈现这些视图。这是最好的方法吗

非常感谢

        var ControlView = Backbone.View.extend({

    el: $(".btn-group"),

    active: 'btn-primary',

    initialize: function()
    {
        _.bindAll(this, 'account', 'password');
        this.account();
    },

    events: {
        "click button.account"  : "account",
        "click button.password" : "password"
    },

    account: function()
    {
        this.reset();
        this.state("button.account");

        profile.fetch({
            success: function()
            {
                AccountView.render();
            }
        });
    },

    password: function()
    {
        this.reset();
        this.state("button.password");

        PasswordView.render();
    },

    state: function(element)
    {
        $(element).addClass(this.active);
    },

    reset: function()
    {
        $(this.el).find("button").removeClass(this.active);
    },

});

AccountView = new AccountView({model:profile});
PasswordView = new PasswordView({model:user});

ControlView = new ControlView;

---

主干使用el元素委托将事件附加到子元素。它不会将事件直接绑定到选择器。问题是，您正在重用相同的元素

el: $(".btn-group")

每次视图渲染时，都会将一组新事件附加到el。但由于从未从dom中删除el，因此事件会不断增加。触发时，将触发所有委派事件

---

主干事件假定，el元素每次都将由视图本身渲染。这样，在重新渲染视图时，所有以前委派的事件都会被销毁。

Ah，对！所以我实际上应该有一个el元素，它还不在DOM中，这样它每次都会被重新渲染，破坏之前附加的事件？没错。也可以在每次新渲染之前手动取消事件的委派，但这是一种非常不方便的方法。