1

Backbone の学習を始めたばかりで、自分のコードにバグがあることに気付きましたが、その解決方法がわかりません。

ControlView でボタンがクリックされるたびに、そのボタンのクリックに関連付けられたビューが読み込まれます。すごい！ただし、ボタン (#button-1) をクリックした場合は、隣接するボタン (#button-2) をクリックし、最初のボタン (#button-1) を再度クリックします。これで、そのビューの 2 つのインスタンスが作成されます。重複したイベントにつながります。つまり、そのビューでフォームを送信するたびに、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 に答える