Question

我刚刚开始学习Backbone并且刚刚注意到我的代码中有一个错误，但我不确定如何解决它。

每次在ControlView中单击一个按钮时，它都会加载与该按钮单击相关联的视图。大！但是，如果单击一个按钮（＃button-1），单击相邻按钮（＃button-2）然后再单击第一个按钮（＃button-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;

Answer 1

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

el: $(".btn-group")

每次视图呈现时，一组新事件都会附加到 el 。但由于 el 永远不会从dom中删除，因此事件会不断增加。触发后，所有委托事件都将触发。

Backbone事件假设， el 元素每次都由视图本身呈现。这样，重新渲染视图时，所有先前委派的事件都会被销毁。

骨干重复事件

1 个答案: