1. ホーム
  2. javascript

[解決済み] Knockout.jsで観測可能なバインディングをクリア/削除する方法とは?

2022-09-06 02:05:56

質問

ユーザーが複数回実行できる機能をウェブページ上に構築しています。ユーザーのアクションによって、オブジェクト/モデルが作成され、ko.applyBindings()を使用してHTMLに適用されます。

データバインドされたHTMLは、jQueryテンプレートで作成されます。

ここまでは良いですね。

2番目のオブジェクト/モデルを作成してこのステップを繰り返し、ko.applyBindings()を呼び出すと、2つの問題に遭遇します。

  1. マークアップは新しいオブジェクト/モデルと同様に前のオブジェクト/モデルも表示します。
  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);

そして、新しいビューモデルでその要素だけに再度ノックアウトバインディングを適用すると、ビューバインディングが更新されます。