[解決済み] Knockout.jsで観測可能なバインディングをクリア/削除する方法とは?
質問
ユーザーが複数回実行できる機能をウェブページ上に構築しています。ユーザーのアクションによって、オブジェクト/モデルが作成され、ko.applyBindings()を使用してHTMLに適用されます。
データバインドされたHTMLは、jQueryテンプレートで作成されます。
ここまでは良いですね。
2番目のオブジェクト/モデルを作成してこのステップを繰り返し、ko.applyBindings()を呼び出すと、2つの問題に遭遇します。
- マークアップは新しいオブジェクト/モデルと同様に前のオブジェクト/モデルも表示します。
- オブジェクト/モデルのプロパティの 1 つに関連して javascript エラーが発生しますが、マークアップではまだレンダリングされています。
この問題を回避するために、最初のパスの後、私は jQuery の .empty() を呼び出して、すべてのデータ バインド属性を含むテンプレート化された HTML を削除し、DOM に存在しないようにしました。ユーザーが 2 番目のパスの処理を開始すると、データ バインドされた HTML が DOM に再追加されます。
しかし、私が言ったように、HTML が DOM に再追加され、新しいオブジェクト/モデルに再バインドされるとき、それはまだ最初のオブジェクト/モデルからのデータを含み、最初のパス中に発生しない JS エラーがまだ表示されます。
マークアップが DOM から削除されても、Knockout がこれらのバインドされたプロパティを保持しているという結論になるようです。
そこで、私が探しているのは、Knockoutからこれらのバインドプロパティを削除する手段です。これを行う方法はありますか?
EDIT
基本的なプロセスは、ユーザーがファイルをアップロードし、サーバーが JSON オブジェクトで応答し、データにバインドされた HTML が DOM に追加され、JSON オブジェクト モデルがこの HTML に
mn.AccountCreationModel = new AccountViewModel(jsonData.Account);
ko.applyBindings(mn.AccountCreationModel);
ユーザーがモデルを選択すると、同じオブジェクトがサーバーにポストされ、データバインドされた HTML が DOM から削除され、次のような JS が作成されます。
mn.AccountCreationModel = null;
ユーザーがもう一度この操作を行いたい場合は、これらのすべての手順を繰り返します。
このコードはjsFiddleのデモを行うにはあまりにも「複雑」だと思います。
どのように解決するのですか?
DOM要素に対してknockoutのclean nodeメソッドを呼び出して、メモリ内にあるバインドされたオブジェクトを破棄してみましたか?
var element = $('#elementId')[0];
ko.cleanNode(element);
そして、新しいビューモデルでその要素だけに再度ノックアウトバインディングを適用すると、ビューバインディングが更新されます。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
最新
-
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 で範囲を作成する - 奇妙な構文
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]