即時更新後端與Knockoutjs

Question

我想創建一個網頁與窗體，一旦用戶更改任何字段，立即驗證和更新提交，而不是讓用戶點擊提交按鈕。我正在使用Knockout.js和映射插件。我知道我可以通過爲每個原始字段創建一個計算字段來實現此目的，但是這種工作是枯燥乏味的，是否有很好的做法來創建一個通用偵聽器來偵聽任何字段中的任何更改並分別更新後端？

Answer 1

爲了訂閱任何更改，您可以使用ko.toJS（）方法。實際上它允許遍歷對象圖和展開可觀察對象。正如您在使用ko.computed時可能知道的那樣，它會訂閱所有觀察值字段的讀取內容，並在每次更改時重新評估。所以，如果你使用這樣的代碼：

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; 

或者，你可以通過你自己的狀態跟蹤散列函數了。