Knockoutjsを使用した即時更新バックエンド

Question

フォームを使用してユーザーがフィールドを変更すると、ユーザーが送信ボタンをクリックするのではなく、検証と更新がすぐにコミットされるようなWebページを作成しようとしています。私はKnockout.jsとマッピングプラグインを使用しています。元のフィールドごとに計算フィールドを作成することでこれを実現できますが、このような作業は単純で愚かです。

Answer 1

変更を購読するには、ko.toJS（）メソッドを使用できます。実際には、オブジェクトグラフを通り抜けてオブザーバブルをラップすることができます。 ko.computedの使用時にはおそらく知っているように、observablesフィールドのすべての読み取りにサブスクライブし、すべての変更について再評価します。したがって、次のようなコードを使用する場合：

ko.computed(function() { 
    ko.toJS(viewModel); 
    // update data on server 
}); 

また、このコードは初期化直後にサーバー上のデータを更新することに注意してください。簡単に回避することができます。この例をチェックアウトしてください：http://jsfiddle.net/UAxXa/embedded/result/

また、変更されたデータのみをサーバーに送信したいと思うかもしれません。あなたはko.editbalesプラグイン（https://github.com/romanych/ko.editables）といくつかのKOアンダーフード知識を組み込むことができます。このサンプルをチェックアウトしてください：http://jsfiddle.net/romanych/RKn5k/

私はそれがあなたを助けることを願っています。

Answer 2

複数のオプションがありますが、単一のリスナーが必要な場合は、変更トラッカーの作成に使用したのと同じコードを使用することをおすすめします。観察可能な変化を聞くだけです。その約19行のコード。これを取得し、変更トラッキングに使用する代わりに、変更が発生したときに変更を保存するメソッドでワイヤリングするだけです。

• NuGet http://nuget.org/packages/Knockout.ChangeTracker
• CodePlexにhttp://kochangetracker.codeplex.com/

セットアップ変更の追跡するために、あなたのビューモデルに、このトラッカーのプロパティを追加します。

viewModel.tracker = new ChangeTracker(viewModel); 

フックをあなたのビューにこれらの変更が発生したときを決定します：

viewModel.tracker().somethingHasChanged(); 

あなたのビューモデルにフックこれを使用すると、機能の状態をリセットしたい（例：ロード、セーブ）：

viewModel.tracker().markCurrentStateAsClean; 

必要に応じて、あなたも、状態の追跡のために独自のハッシュ関数を渡すことができます。