1. ホーム
  2. javascript

[解決済み] Backbone.js : ビューを再投入するか、再作成するか?

2023-06-06 22:48:47

質問

私のWebアプリケーションでは、左側にテーブルのユーザーリスト、右側にユーザー詳細ペインがあります。管理者がテーブル内のユーザーをクリックすると、その詳細が右側に表示されるはずです。

左側にUserListViewとUserRowViewがあり、右側にUserDetailViewがあります。物事はなんとなく動いていますが、私は奇妙な動作をしています。左側でいくつかのユーザーをクリックし、それらのうちの1つをクリックすると、表示されているすべてのユーザーに対して連続したjavascriptの確認ボックスが表示されます。

以前に表示されていたすべてのビューのイベントバインディングが削除されていないように見えますが、これは正常のようです。UserRowViewで毎回新しいUserDetailViewをするのはやめたほうがいいのでしょうか?ビューをメンテナンスして、その参照モデルを変更したほうがいいのでしょうか?現在のビューを記録しておき、それを削除してから新しいビューを作成したほうがいいのでしょうか?私はちょっと迷っているので、どんなアイデアでも歓迎されます。ありがとうございます!

以下は左ビューのコードです(行の表示、クリックイベント、右ビューの作成)。

window.UserRowView = Backbone.View.extend({
    tagName : "tr",
    events : {
        "click" : "click",
    },
    render : function() {
        $(this.el).html(ich.bbViewUserTr(this.model.toJSON()));
        return this;
    },
    click : function() {
        var view = new UserDetailView({model:this.model})
        view.render()
    }
})

そして、右側のビュー(削除ボタン)のコード

window.UserDetailView = Backbone.View.extend({
    el : $("#bbBoxUserDetail"),
    events : {
        "click .delete" : "deleteUser"
    },
    initialize : function() {
        this.model.bind('destroy', function(){this.el.hide()}, this);
    },
    render : function() {
        this.el.html(ich.bbViewUserDetail(this.model.toJSON()));
        this.el.show();
    },
    deleteUser : function() {
        if (confirm("Really delete user " + this.model.get("login") + "?")) 
            this.model.destroy();
        return false;
    }
})

どのように解決するのですか?

私は最近このことについてブログを書き、これらのシナリオを処理するために私のアプリケーションで行っているいくつかのことを示しました。

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/