使用Knockout.js绑定在窗体上显示错误

我想使用Knockout.js来突出显示窗体上的错误。其中一些错误可能通过客户端验证生成，其中一些错误可能来自服务器，当表单被保存时。理想情况下，我想模板看起来像这样：使用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中的错误消息和突出显示的字段会自动反映这些更改，并且可以轻松地查询数据的状态任何时候。

问题：在模型中包含错误字段列表的地方，实现错误高亮显示的最简洁方法是什么？

来源

2013-03-18 Mike Christensen

我的偏好是使用类似于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>

关于“子观测”另一个好处是，在转换时，他们将落你的数据返回到JSON发送到服务器。

我们在使用扩展来添加子可观的KO文档的例子：http://knockoutjs.com/documentation/extenders.html#live_example_2_adding_validation_to_an_observable

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

来源

2013-03-18 19:30:02

不知道是否有办法让[映射插件]（http://knockoutjs.com/documentation/plugins-mapping.html）自动将这些'hasError'观察值添加到每个映射字段。 – 2013-03-18 19:39:06

您可以查看映射插件的'create'回调：http：// knockoutjs。com/documentation/plugins-mapping.html＃customizing_object_construction_using_create – 2013-03-18 20:09:01

我试图避免解决方案，我必须手动调出每一个字段。有很多，我不想在代码中列出它们。但是，也许没有办法解决这个问题。 – 2013-03-18 20:10:24

使用Knockout.js绑定在窗体上显示错误

回答

相关问题