使用 Knockout Validation 进行表单验证

Question

我遇到了一些使用 Knockout 进行数据绑定的表单设计的架构问题。我有一个相当庞大的项目在工作，为了简单起见，假设我正在访问一个 API 端点（虽然不是 RESTful）并返回一个 JSON 响应。我目前正在通过自定义映射函数运行此响应，以将所有属性转换为 observables。表单工作正常，但我现在想使用 Knockout Validation 添加验证。我们还没有构建所有不同的规则，但我希望深入了解的答案是通过我的可观察地图添加规则的最佳方式。另一个令人头疼的是，返回的响应具有根据服务器上可以在 UI 中更新的某些设置而变化的属性，因此我不会为我可能需要的东西准备好可观察的。我知道这非常令人困惑，所以也许一个模糊的、人为的例子会有所帮助：

前提条件：设置X在页面加载时启用

JSON 响应：

results: [
  { a: 1 },
  { b: 2 },
  { c: 3 }
]

处理：

var arr = ko.observableArray([]);

$.get('/endpoint/').then(function(data) {
  data.results.forEach(function(result) {
    arr.push(mapToObservables(result));
  });
});

设置Y启用，属性“c”不再相关但“d”是，所以需要返回的JSON是：

updates: [
  { a: 1 },
  { b: 3 },(updated value)
  { d: 4 } (new value)
]

我最初观察属性“a，b，c”，所以“a，b”很好，因为它们的状态仍然是已知的。但是由于设置更改，需要添加属性“d”，而我还没有关注它。

这个例子非常做作，但我不想遇到任何 IP 问题，所以希望它有意义。真正的应用程序要大得多，对同一端点的不同 GET/POST 可能会导致 6 或 7 个不同的状态。检查“是否设置了 X？然后将 Y 和 Z 的属性设置为具有适当规则的空 observables，以防万一”似乎不太可扩展/可维护（对于其他可能的情况也是如此）。

我真的希望这对可以指导我的人有一点意义。我进入这个项目时甚至不知道 Knockout 是什么或以前的应用程序是如何工作的，所以试图吸收所有相关知识有点疯狂。提前谢谢大家！

编辑：

我接受了 Roy 在下面的回答，因为它最接近我正在寻找的内容，但为了更清楚一点，请想象一下这种情况。我遇到了一个可以发回属性a、b、c 或d 的端点（但总是一个子集，而不是完整集）。如果我返回a 和b，我可以轻松地使用ko.mapping 使它们可以被观察到，以防它们发生变化。但是，我需要能够做的是让用户基本上摆脱b 并选择c，例如。如果用户想使用它们，我想不出一种干净的方法来在页面加载时为c 和d “设置”可观察对象以允许它们使用。唯一想到的是我为我的应用程序中所有可能的字段设置了可观察对象，即使在 90% 的情况下，其中有一半不会被使用。或者我想我可以使用像邮箱这样的 pubsub 系统在运行时动态创建所需的 observables。我知道使用 observable 会产生一些开销，但它们对我来说似乎相当轻量级，所以当同时考虑性能和开发时间时，我不确定这些方法中哪一种是“最好的”。

Answer 1

这是您正在寻找的那种行为吗？

var d1 = {
  a: 1,
  b: 2
};
var d2 = {
  a: 'oo',
  c: 'ah'
};

var vm = {
  data:ko.observable()
  };
vm.data(ko.mapping.fromJS(d1));
setTimeout(function() {
  vm.data(ko.mapping.fromJS(d2));
}, 1000);


ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div data-bind="if:data().a">A:<span data-bind="text:data().a"></span>
</div>
<div data-bind="if:data().b">B:<span data-bind="text:data().b"></span>
</div>
<div data-bind="if:data().c">C:<span data-bind="text:data().c"></span>
</div>