如何将ko.validation错误与相关的viewmodel字段名称绑定在一起

Question

我正在使用Knockout.Validation,我希望能够显示错误摘要,其中每行显示错误消息(显然!)以及与其相关的视图模型上的字段名称,例如

• 年龄 - 请输入一个数字
• 出生日期 - 请输入正确的日期

到目前为止,我已经有一个validatedObservable包装我的视图模型,这会在我的viewmodel上自动放置一个errors数组,包含我的所有错误.但是我看不到任何简单的方法来检索每个错误与哪个字段相关.

我知道我可以自己遍历视图模型,从isValid属性构建我自己的错误集合 - 这是我唯一的选择吗？

一旦我有了字段名称,我就可以将我的验证摘要映射到该字段的相关"友好"标签(例如"出生日期"而不是"DateOfBirth").

这是我到目前为止的代码的简化版本:

视图模型

function PersonModel(){
   var self = this;
   self.Age = ko.observable().extend({ number: true});

   self.DateOfBirth = ko.observable({ date: true});             
   self.Validate = function() {                           
       if (!self.isValid()) {                                         
          self.errors.showAllMessages();        
          return false;          
       }
       return true;
    };    

ko.validation.init({
                grouping: { deep: true, observable: true },
                registerExtenders: true,
                messagesOnModified: true,
                insertMessages: true
            });

ko.applyBindings(ko.validatedObservable(new PersonModel()));

HTML

<ul data-bind='foreach: model().errors' class="message">
    <li>
           <span data-bind='text:  $data'></span>
    </li>
</ul>

非常感谢

Answer 1

您可以对任何变量使用自定义验证消息.

emailAddress: ko.observable().extend({
    required: { message: 'Email Address: Required field.' }
}),

Answer 2

您可以执行以下操作:

• 添加friendlyName扩展程序以为您的observable提供友好名称
• 破解显示消息的绑定处理程序

友好名称:

最简单的淘汰赛延长器:

ko.extenders.friendlyName = function (obs, options) {
    obs.friendlyName = options;
}

用法: self.Age = ko.observable(3).extend({ friendlyName: "My Age" });

显示消息黑客:

Knockout验证插件创建一个绑定处理程序validationMessage来显示错误消息.您可以直接使用它(带有一些html标记)或让插件使用配置选项处理消息insertMessages.

在这里,我只是编辑它创建的html(仍然调用原始绑定处理程序)以考虑friendlyName到:

var originalValidationMessageUpdate= ko.bindingHandlers.validationMessage.update;
ko.bindingHandlers.validationMessage.update = 
    function (element, valueAccessor, allBindingAccessor, viewModel, 
              bindingContext) {
        if (originalValidationMessageUpdate)
            originalValidationMessageUpdate(element, valueAccessor, 
                                            allBindingAccessor, viewModel,
                                            bindingContext);
        var prepend = (ko.isObservable(valueAccessor()) 
                            && valueAccessor().friendlyName)
                                  ? valueAccessor().friendlyName + " - "
                                  : "";

        $(element).html(prepend + $(element).html());
        // ^^^^ This is the line that is actually useful
    }

注意:我没有创建friendlyName一个observable,因为我猜它不会更新,但它可以做到.

演示