Plantilla de validación de KnockOutjs y modelos multi

Question

Tengo dos páginas, la primera es una página de inicio de sesión, simple:

Modelo KnockOutjs

function Login(){
   var self=this;
   self.email = ko.observable().extend({ email: true, required: true });
   self.password = ko.observable().extend({ required: true});
}

Encuadernación modelo

$(function () {
  ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'validation',
    messageTemplate: "ValidationTemplate",
    errorsAsTitle: false
  });
  var login = new Login();
  ko.applyBindings(login);
});

Definición de plantilla

<script type="text/html" id="ValidationTemplate">
    <span data-bind="attr: { error: field.error }, 
    visible: field.isModified() && !field.isValid(), 
    event: { mouseover: layout.errorTooltip }" 
    class="glyphicon glyphicon-exclamation-sign f-validation-message"></span>
</script>

Todo funciona bien, el pequeño icono aparece sobre la entrada que obtiene bordes rojos.

luego la otra página, con la jerarquía de modelos:

Padre KnockOutjs modelo

function Parent()
{
  var self=this;
  self.child= new Child();
}

Modelo KnockOutjs Child

function Child()
{
  var self=this;
  self.val1= ko.observable().extend({ required: true });
  self.val2= ko.observable().extend({ required: true });
}

Modelo de encuadernación de padres

$(function () {
  ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'validation',
    messageTemplate: "ValidationTemplate",
    errorsAsTitle: false
  });
  var parent= new Parent();
  ko.applyBindings(parent);
});

Las entradas se incluyen en este caso incluidas en un bloque

<div data-bind="with:$root.child">
...
</div>

La plantilla de validación es la misma.

Entonces, el icono no aparece sino las fronteras, sí.

Cuando reviso el código, KNOUCKOUTJS no "se extendió" la plantilla en cada entrada.

La única diferencia es el sistema Multi Models, pero ¿no está seguro de cómo afecta la unión?

Gracias por su ayuda.

yoann

Answer 1

OK, encontré el problema, no estaba vinculado en absoluto con la plantilla Multi Modelo o Validación.

Fué los datos vinculantes como SIGUIENTE:

//data: JS object
self.obsProp(ko.mapping.fromJS(data));
self.obsProp().value1.extend({required:true});
self.obsProp().value2.extend({required:true});

forma incorrecta , la forma correcta de mapear los datos con validación:

var validationMapping = {
  value1: {
   create: function(options) {
      return ko.observable(options.data).extend( {required: true} );
       }
    },
  value2: {
   create: function(options) {
      return ko.observable(options.data).extend( {required: true} );
       }
    }
};
self.obsProp(ko.mapping.fromJS(data,validationMapping));

y todo funciona bien.

gracias :)