Knockout でのデータの編集に関するブログ投稿やディスカッションが多数あります。私が抱えている主な問題は、ユーザーが編集操作をキャンセルしたとき (または Ajax 呼び出しが失敗したとき) に、データを以前の値に戻す簡単な方法が必要なことです。
私が見つけた例には満足できませんでした。非常に複雑なモデルを編集する場合でも、非常に単純なものが必要でした。
Knockout でのデータの編集に関するブログ投稿やディスカッションが多数あります。私が抱えている主な問題は、ユーザーが編集操作をキャンセルしたとき (または Ajax 呼び出しが失敗したとき) に、データを以前の値に戻す簡単な方法が必要なことです。
私が見つけた例には満足できませんでした。非常に複雑なモデルを編集する場合でも、非常に単純なものが必要でした。
これは私が見つけた解決策です。私よりも専門家からの潜在的な欠点を理解し、もちろん助けるために共有しています。
「編集」ボタンをクリックすると、編集中のデータのコピーを作成します。
編集ボタン (つまり、foreach バインディングを持つテーブルの各行)
<button data-bind="click: editItem">Edit</button>
私のViewModelから:
this.selectedItem = ko.observable();
this.selectedItemCache = ko.observable();
this.editItem = function (item) {
self.selectedItem (item);
self.selectedItemCache (ko.mapping.toJS(item)); // ko.mapping.toJS "detach" my item from the view model
}
ユーザーが「キャンセル」ボタンをクリックしたとき、またはサーバーの更新に使用された AJAX 呼び出しが失敗したとき、次のように「キャッシュ」オブザーバブルからデータをコピーします。
this.cancelEditItem = function () {
for (var prop in self.selectedItem) {
if (typeof self.selectedItem[prop] === 'function') {
self.selectedItem[prop](self.selectedItemCache()[prop]);
}
}
}
Ryan Niemeyer の「Getting the Most Out of Knockout.js」スクリーンキャストには、これを行うための優れた方法が含まれています (その他の役立つヒントも多数あります)。ぜひチェックしてみてください。
彼は16:30頃に戻ることについて話します。
そのアプローチが最も一般的なアプローチであるというニコラの答えに同意します。
これを行うにはかなり洗練された方法であるhttp://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.htmlを使用しました。私のアプリではうまくいきました。