20

我正在尝试将验证附加到映射视图。我正在使用 Knockout 映射和验证插件。伪模型：

Person {
    int Id;
    string Name;
    Book[] Books;
}

Book {
    int Id;
    string Name;
}

Javascript：

function viewModel() {
    var self = this;
    self.persons = ko.observableArray();

    // persons are retrieved via AJAX...
    ko.mapping.fromJS(persons, {}, self.persons);
}

jQuery(function( $ ) {
    ko.applyBindings(new viewModel());
});

如何扩展 people observableArray 以设置验证规则和消息？我需要验证人员和书籍子数组属性。我发现只有使用显式模型设置的示例，没有自动映射，例如：

Name: ko.observable().extend({ required: true })

然后我需要设置 ko.validatedObservable、isValid 和 validation.init，但我真的不知道如何处理/组织这个。你能提供一些帮助吗？

4

2 回答 2

30

我发现至少有两种方法可以为通过 ko.mapping 插件创建的模型或视图模型对象提供验证：

  1. 在创建某些属性时使用映射选项附加验证规则
  2. HTML5 属性。这仅支持某些验证（即必需的模式）。有关详细信息，请参阅Knockout-Validation 插件的文档

上述两种技术也可以结合使用。有关示例，请参见以下小提琴。

1. 使用映射选项

Knockout Mapping 插件允许在要自定义的映射对象上创建某些属性。利用此功能，您可以覆盖插件的默认行为并为您的映射属性添加验证。下面是一个例子

HTML

<input data-bind="value: name" />


Javascript

var data = { name: "Joe Shmo" };

var validationMapping = {
    // customize the creation of the name property so that it provides validation
    name: {
        create: function(options) {
            return ko.observable(options.data).extend( {required: true} );
        }
    }
};

var viewModel = ko.validatedObservable(ko.mapping.fromJS(data, validationMapping));
ko.applyBindings(viewModel);


2. HTML5 属性

Knockout Validation 插件支持一组有限的 HTML5 验证属性，可用于您的 HTML 控件。但是，使用它们需要启用该parseInputAttributes选项。这是一个简单的例子：

HTML

<input data-bind="value: name" required />


Javascript

// this can also be configured through the "validationOptions" binding (https://github.com/ericmbarnard/Knockout-Validation/wiki/Validation-Bindings)
ko.validation.configure({
    parseInputAttributes: true
});

var data = { name: "Joe Shmo" };

var viewModel = ko.validatedObservable(ko.mapping.fromJS(data));
ko.applyBindings(viewModel);
于 2013-01-02T03:13:00.237 回答
4

另一种方法是在映射后扩展可观察对象。

function viewModel() {
    var self = this;
    self.persons = ko.observableArray();

    // persons are retrieved via AJAX...
    ko.mapping.fromJS(persons, {}, self.persons);


    self.Name.extend({ required: true });
}
于 2014-03-12T21:08:42.843 回答