1

KnockoutJSを使用して作成しているページで見られる少し奇妙な動作を理解しようとしています。バインディングをクリアして再適用するたびに、監視可能な配列が重複するアイテムを取得するようです。問題を理解する最も簡単な方法は、このJSFiddleデモを確認することです。編集ボタンを数回クリックするだけで、このリストが大きくなるのを見ることができます。

このデモのコードの中心は、次の方法にあります。

var _bindItemDetail = function (jsonData) {
        //clear existing bindings
        ko.cleanNode($("#itemdetails").get(0));

        // observables in selected item.
        _viewModel.SelectedItem(ko.mapping.fromJS(jsonData));

        // Apply Bindings
        ko.applyBindings(_viewModel.SelectedItem, $("#itemdetails").get(0));
    };

私が達成しようとしていることの本質は、リストと詳細ページを1つに作成することです。リストJSONは最初のページの読み込み時にフェッチされ、編集リンクがクリックされるたびに詳細JSONがフェッチされて「detail」htmlにバインドされます。

問題を解決することに加えて、私は動作を理解し、ノックアウトを使用するときに古いリソースを適切にクリーンアップする方法についていくつかのレッスンを学ぼうとしています。

助けてくれてありがとう

4

1 に答える 1

2

問題は、_bindItemDetail関数で、要素を既に複製した変更済みビューにバインディングを再適用していることです。

var _bindItemDetail = function (jsonData) {
    //clear existing bindings
    ko.cleanNode($("#itemdetails").get(0));

    // observables in selected item.
    _viewModel.SelectedItem(ko.mapping.fromJS(jsonData));

    // Apply Bindings
    ko.applyBindings(_viewModel.SelectedItem, $("#itemdetails").get(0));
};

ko.cleanNode()要素からバインディングを削除するだけで、ビューを初期状態に戻すことはありません。ko.applyBindings一般に、ノードのセットを1回だけ呼び出す必要があります。それを複数回行うことは、問題を求めているだけです。

率直に言って、あなたはノックアウトを実際にうまく利用していません。コードの大部分は、jqueryを使用してすべての低レベルの詳細を処理しています。ノックアウトを使用するポイントは、これらの下位レベルの詳細について心配する必要がないことです。

jqueryの使用をあまり重視せずに、ノックアウトをより有効に活用できるように、フィドルを少し調整しました。

ビューで：

  • clickバインディングを使用してEditクリックイベントを処理しました。
  • バインディングを使用してwith、エディターフィールドを条件付きで表示しました。stopBindingsハンドラーは必要ありません。

ビューモデルの場合：

  • editClickedビューモデルにクリックハンドラーを追加しました。
  • jqueryイベントバインディングを削除しました。
  • アイテムをバインドするときに持っていたko.cleanNode/コンボを削除しました。ko.applyBindingsあなたはそれをするべきではありません、そしてあなたはそれを必要としないだけです、ノックアウトはあなたのためにそれをすべて処理します。

更新されたフィドル

于 2012-11-16T06:15:12.133 に答える