6

さまざまなタブ、フォーム、ラジオ ボタン、ドロップダウンなどを含むかなり複雑な Web ページがあります。Knockout.js を使用して、AJAX 呼び出しによって読み込まれた非常に複雑な JavaScript オブジェクトにすべてバインドされています。もちろん、ユーザーは心ゆくまで内容をいじることができ、その時点で[保存] ボタンをクリックして、すべての変更をサーバーに保持します。

保存を実装できるように、ページで変更された内容を正確に追跡するための優れた設計を考案中です。そこで、いくつかの可能な実装を考え出しました。

オプション 1) すべてを送り返し、サーバーに整理させる:この方法では、Knockout にデータ ソースの更新だけを任せます。[保存] ボタンは.toJS()、そのデータを呼び出してサーバーに送り返します。 長所:非常に簡単で、クライアントでの作業はほとんど必要ありません。 短所:サーバーは何が変更されたかを実際には認識せず、データベースからデータを読み込んで比較するか、すべてのフィールドを再度保存する必要があります。これらのフィールドは複数のテーブルから取得され、複雑な関係を持っています。また、ドキュメント全体を単一の原子単位として扱います。他の誰かがフィールド A を変更し、あなたがフィールド B を変更した場合、1 人のユーザーが変更を失うことになります。

オプション 2) JavaScript を使用して元のデータと現在のデータを比較する:この手法を使用すると、ユーザーが[保存] ボタンをクリックしたときに、元のデータと現在のデータを体系的に比較し、変化のグラフを生成します。 長所:これにより、理想的には、ユーザーが変更した正確な内容のコンパクトなグラフが得られます。 短所:バインドしているデータが複雑です。これは、文字列、配列、オブジェクト、オブジェクトの配列、他のオブジェクトを含むオブジェクトの配列などで構成されます。変更を探すのは、かなり複雑なネストされたループになります。

オプション 3) UI で行われる変更を追跡する:変更が発生するたびに監視し、UI 要素が変更されたときにデルタを保持する必要があります。保存ボタンは、保留中の変更がある場合、その変更グラフをサーバーに送信するだけです。 長所: 2 つの巨大な JavaScript オブジェクトを比較して変更を探す必要はありませんが、オプション 2 のすべての利点があります。 短所:ノックアウトには、単一のイベント ハンドラーを使用してすべての変更をリッスンする標準的な方法がないようです。bindingHandlersこのリアルタイムの変更追跡を実装するには、すべての UI 要素にバインドするか、Knockout でカスタムを作成する必要があると思います。

私の質問：

私の質問は主に Knockout.js の専門家向けです。この明らかに一般的なシナリオを解決するための標準的なアプローチ、または推奨されるガイドラインはありますか? 変更されていないものも含め、すべてのデータを送り返すのは一般的な設計ですか? それとも、カスタム変更トラッカーを実装していますか? Knockout は、この要件を緩和するフレームワークを提供していますか?

更新：これが役立つかどうか、または誰かがフィードバックを持っているかどうかはわかりません。

4

3 に答える 3

1

[保存]ボタンを有効/無効にして、ユーザーがそのページ/状態から「移動」できるようにすることが問題の場合は、https：//github.com/CodeSeven/koliteで確認できます。

knockout.dirtyFlag.jsを確認してください

お役に立てれば。

編集：「UI」からのデータを「決して」信頼してはならないことを忘れないでください。実際の比較と検証は、最終的にはサーバー内の「制御された」環境で行われます。

于 2013-02-21T19:58:52.220 に答える
1

ピート・スミスが大幅に拡張したノックアウト用の変更トラッカー拡張機能を作成しました...

こちらをご覧ください: https://roysvork.wordpress.com/2014/01/12/tracking-changes-to-complex-viewmodels-with-knockout-js/

これは、オブザーバブルを拡張して初期状態とユーザーがクライアントで行った変更を追跡するという原則に基づいて機能します。これは非常にうまく機能し、ユーザーが何を変更したかをリアルタイムでフィードバックできると思います。実際には、変更トラッカーの再利用可能な機能をすべて使用して、保留中のすべての変更を表示し、個々の変更を元に戻すことさえできる保存パネルを実際に実装します。

ko.extenders.trackChange = function (target, track) {
    if (track) {
        target.isDirty = ko.observable(false);
        target.originalValue = target();
        target.subscribe(function (newValue) {
            // use != not !== so numbers will equate naturally
            target.isDirty(newValue != target.originalValue);
        });
    }
    return target;
};
于 2015-04-15T17:01:35.593 に答える