Question

我想使用Knockout.js突出显示表单上的错误。其中一些错误可能是通过客户端验证生成的，其中一些可能在保存表单时来自服务器。理想情况下，我希望模板看起来像这样：

<label data-bind="css: { error: Errors.ProjectName }">Project Name<input data-bind="value: ProjectName" /></label>

如果Errors.ProjectName为true-ish，则上述<label>的CSS类为error。

然而，要做到这一点，我想我必须使Errors像：

this.Errors = {
   ProjectName: ko.observable(false),
   FieldA: ko.observable(false),
   FieldB: ko.observable(false),
   // ... Every single field
};

这是一个维护噩梦，因为此表单包含许多许多字段。所以，我不想这样做，而是希望模型以某种方式包含错误字段列表。更像是：

this.Errors = ko.observableArray( [] );

当我的代码发现错误时，我可以简单地将该数组设置为包含错误的字段列表：

model.Errors( ['ProjectName'] ); // ProjectName is invalid

模板将成为：

<label data-bind="css: { error: Errors.indexOf('ProjectName') >= 0  }">Project Name<input data-bind="value: ProjectName" /></label>

这很有效，但是我不得不检查模板中的可观察数组索引。我试图掌握Knockout的部分需要更清晰，更易读的方法。

有些人可能认为Knockout.js不是用于显示错误消息和验证UI的正确工具。这可能是一个有效的意见。但是，我喜欢使用单个模型来存储错误，并且当从该模型中添加或删除错误时，UI上的错误消息和突出显示的字段会自动反映这些更改，并且可以在以下位置轻松查询数据的状态。任何时候。

问题：实现错误突出显示的最简洁方法是什么？模型包含错误的字段列表？

Answer 1

我的偏好是在observable上使用类似isValid或hasError子观察点的东西来跟踪其状态。因此，您的视图模型如下所示：

this.ProjectName = ko.observable();
this.ProjectName.hasError = ko.observable();  //or can be a computed, if it will handle keeping itself updated

然后，您可以绑定：

<label data-bind="css: { error: ProjectName.hasError  }">Project Name<input data-bind="value: ProjectName" /></label>

“sub-observables”的另一个好处是，在将数据转换回JSON以发送到服务器时它们会丢失。

我们在使用扩展程序添加子可观察量的KO文档中有一个示例：http://knockoutjs.com/documentation/extenders.html#live_example_2_adding_validation_to_an_observable

此外，您可能需要查看Knockout-Validation，因为它使用了类似的方法。

使用Knockout.js绑定在表单上显示错误

1 个答案: