如何将 ko.validation 错误与相关的视图模型字段名称联系在一起 [英] How to tie together ko.validation errors with related viewmodel field names

问题描述

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

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

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

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

获得字段名称后，我可以将验证摘要映射到该字段的相关友好"标签(例如出生日期"而不是出生日期").

这是我目前使用的代码的简化版本:

视图模型

function PersonModel(){var self = this;self.Age = ko.observable().extend({ number: true});self.DateOfBirth = ko.observable({ date: true});self.Validate = function() {如果(！self.isValid()){self.errors.showAllMessages();返回假；}返回真；};ko.validation.init({分组:{深:真，可观察:真}，注册扩展器:真，messagesOnModified: 真,插入消息:真});ko.applyBindings(ko.validatedObservable(new PersonModel()));

HTML

<li><span data-bind='text: $data'></span>

非常感谢

解决方案

您可以执行以下操作:

• 添加一个 friendlyName 扩展器，为你的 observable 提供一个友好的名称
• 破解显示消息的绑定处理程序

友好名称:

有史以来最简单的淘汰赛延长线:

ko.extenders.friendlyName = function (obs, options) {obs.friendlyName = 选项；}

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

显示消息黑客:

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

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

var originalValidationMessageUpdate= ko.bindingHandlers.validationMessage.update;ko.bindingHandlers.validationMessage.update =函数(元素、值访问器、所有绑定访问器、视图模型、绑定上下文) {如果(原始ValidationMessageUpdate)originalValidationMessageUpdate(element, valueAccessor,allBindingAccessor, viewModel,绑定上下文);var prepend = (ko.isObservable(valueAccessor())&&valueAccessor().friendlyName)?valueAccessor().friendlyName + " - ":"";$(element).html(prepend + $(element).html());//^^^^ 这是真正有用的行}

注意:我没有将 friendlyName 创建为 observable，因为我猜它不会被更新，但有可能做到.

演示

I'm using Knockout.Validation and I'd like to be able to display an error summary where each line displays the error message (obviously!) and also the field name on the view model related to it, e.g.

• Age - please enter a number
• Date of birth - please enter a proper date

So far I've got a validatedObservable wrapping my view model, and this puts an errors array on my viewmodel automatically, containing all my errors. However I can't see any easy way to retrieve which field each error relates to.

I know I could traverse the view model myself, building up an errors collection of my own from the isValid property - is this my only option though?

Once I have the field name, I can map my validation summary to the related "friendly" label for that field (e.g. "Date of birth" rather than "DateOfBirth").

Here's a simplified version of the code I have so far:

ViewModel

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>

Many Thanks

解决方案

You can do the following:

• Add a friendlyName extender to provide a friendly name to your observables
• Hack the binding handler that shows the messages

Friendly Name:

Simplest knockout extender ever:

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

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

Display message hack:

Knockout validation plugin creates a bindinghandler validationMessage to display error messages. You can use it directly (with some html markup) or let the plugin handle the messages with the configuration option insertMessages.

Here I just edit the html it creates (the original binding handler is still called) to take the friendlyName into account:

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
    }

Note: I did not create friendlyName as an observable since I guess it will not be updated, but it is possible to do it.

Demo

这篇关于如何将 ko.validation 错误与相关的视图模型字段名称联系在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！