1

我刚刚开始学习 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;
4

1 回答 1

3

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

el: $(".btn-group")

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

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

于 2012-09-12T10:14:26.007 回答