さまざまなタブ、フォーム、ラジオ ボタン、ドロップダウンなどを含むかなり複雑な 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 は、この要件を緩和するフレームワークを提供していますか?
更新:これが役立つかどうか、または誰かがフィードバックを持っているかどうかはわかりません。