[解決済み] 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;
}
})
どのように解決するのですか?
私は最近このことについてブログを書き、これらのシナリオを処理するために私のアプリケーションで行っているいくつかのことを示しました。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み】JavaScript版sleep()とは?)
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript で範囲を作成する - 奇妙な構文
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?