knockout.js - for - Validación de Mapeo Knockout

knockout js data bind text

Question

Estoy tratando de adjuntar la validación a una vista asignada. Estoy usando los complementos de Validación y Mapeo Knockout. Pseudo-modelos:

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());
});

¿Cómo puedo extender el observableArray de las personas para establecer reglas y mensajes de validación? Necesito validar las propiedades de sub-array tanto de personas como de libros. Solo he encontrado ejemplos que utilizan la configuración explícita del modelo, sin mapeo automático, algo como:

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

Entonces tendré que configurar ko.validatedObservable, isValid y validation.init, pero realmente no sé cómo manejar / organizar esto. ¿Puede por favor proporcionar alguna ayuda?

Answer 1

He encontrado al menos dos formas de proporcionar validaciones para modelar o ver objetos de modelo que se crean a través del complemento ko.mapping:

1. Utilice las opciones de asignación para adjuntar las reglas de validación cuando se crean ciertas propiedades
2. Atributos HTML5. Esto solo es compatible con algunas validaciones (es decir, requeridas, patrón). Consulte la documentación del complemento de Validación de Knockout para obtener más información.

Las dos técnicas anteriores también se pueden combinar. Vea el siguiente fiddle para un ejemplo.

1. Usando Opciones de Mapeo

El complemento Knockout Mapping permite la creación de ciertas propiedades en objetos asignados para personalizar. Aprovechando esta funcionalidad, puede anular el comportamiento predeterminado del complemento y agregar validación para sus propiedades asignadas. A continuación se muestra un ejemplo.

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. Atributos de HTML5

El complemento de Validación de Knockout es compatible con un conjunto limitado de atributos de validación de HTML5 que se pueden usar en sus controles HTML. Sin embargo, usarlos requiere habilitar la opción parseInputAttributes . Aquí hay un ejemplo simple:

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);

Answer 2

Otra forma es extender lo observable después de que se haya mapeado.

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 });
}