Question

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

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;

或者，您也可以传递自己的hashFunction进行状态跟踪。

使用Knockoutjs即时更新后端

2 个答案: