3

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

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

如果Errors.ProjectName是真的，那么上面<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 上的错误消息和突出显示的字段会自动反映这些更改，并且可以轻松地查询数据的状态随时。

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

4

1 回答 1

4

我的偏好是在可观察对象上使用类似可观察对象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，因为它使用了类似的方法。

于 2013-03-18T19:30:02.580 回答