使用 Knockoutjs 即时更新后端

Question

我正在尝试创建一个带有表单的网页，一旦用户更改任何字段，验证和更新就会立即提交，而不是让用户单击提交按钮。我正在使用 Knockout.js 和映射插件。我知道我可以通过为每个原始字段创建一个计算字段来实现这一点，但这种工作既乏味又愚蠢，是否有好的做法来创建一个通用侦听器来侦听任何字段中的任何更改并分别更新后端？

Answer 1

为了订阅任何更改，您可以使用 ko.toJS() 方法。实际上，它允许遍历对象图并展开可观察量。正如您可能知道的那样，当您使用 ko.compulated 时，它会订阅可观察字段的所有读取并重新评估每个更改。因此，如果您使用这样的代码：

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; 

您也可以选择传递自己的 hashFunction 进行状态跟踪。