validation knockoutjs - recalculer les règles de validation

Question

J'utilise knockoutjs avec le plugin de validation de knockoutjs pour valider mon modèle de vue. Voici mon code javascript

// enable validation 
ko.validation.init(); 

// View model 
function AppViewModel() { 

    this.Canceled = ko.observable(false); 

    this.Name = ko.observable("").extend({ 

     //custom validation 
     validation: { 
      validator: function (val, params) { 

       //alert to show when validation is triggered 
       alert("validation function was called"); 

       //change validation rule depending on whether cancel button was clicked 
       if(params.Canceled == true) 
        return true; 
       else 
        return false; 

      }, 
      message: 'This field is required', 
      params: {Canceled:this.Canceled()} 
     } 
    }); 


    this.errors = ko.validation.group(this); 

    //function triggered on submit which checks for validation 
    this.submit = function() { 
     if(this.errors().length != 0) 
      this.errors.showAllMessages(); 
     else 
      alert("no errors detected"); 
    }; 

    //function to cancel validation rules 
    this.cancelValidation = function() { 
     this.Canceled(true); 
    }; 
} 

// Activate knockout.js 
ko.applyBindings(new AppViewModel());​ 

et voici mon code HTML

Name: <input type="text" data-bind="value: Name"/><br/><br/> 
<button data-bind="click: submit">submit</button> <button data-bind="click: cancelValidation">Cancel validation</button>​ 

Ce que je suis en train de faire est de changer les règles de validation lors de l'exécution si le bouton « Annuler la validation » est cliqué. Pour ce faire, j'utilise une fonction de validation personnalisée avec une variable ko.observable appelée "Annulée". En fonction de la valeur de "Annulé", ma fonction validateur renvoie true ou false. Le problème que j'ai est que la fonction de validation s'exécute seulement une fois quand la page se charge. La fonction n'est pas réexécutée lorsque la valeur de "Annulé" change. Est-ce que c'est un comportement normal? Est-il possible de réexécuter la fonction de validation du modèle actuel lorsque je modifie la valeur de "Annulé"?

Voici un violon pour essayer le code. J'ai ajouté une alerte à l'intérieur de la fonction de validation pour montrer qu'elle ne s'exécute qu'une seule fois lors du chargement de la page.

http://jsfiddle.net/eewJe/

Answer 1

Peu importe, j'ai pu le résoudre seul. Pour toute personne tomber sur cette question, voici ma mise à jour Javascript

// enable validation 
ko.validation.init(); 


// View model 
function AppViewModel() { 

    var self = this; 

    this.Canceled = ko.observable(false); 

    this.Name = ko.observable("").extend({ 

     //custom validation 
     validation: { 
      validator: function (val,para) { 

       //alert to show when validation is triggered 
       alert("validation function was called"); 

       //change validation rule depending on whether cancel button was clicked 
       if(self.Canceled() == true) 
        return true; 
       else 
        return false; 

      }, 
      message: 'This field is required' 
     } 
    }); 


    this.errors = ko.validation.group(this); 

    //function triggered on submit which checks for validation 
    this.submit = function() { 
     if(this.errors().length != 0) 
      this.errors.showAllMessages(); 
     else 
      alert("no errors detected"); 
    }; 

    //function to cancel validation rules 
    this.cancelValidation = function() { 
     this.Canceled(true); 
    }; 
} 

// Activate knockout.js 
ko.applyBindings(new AppViewModel());​ 

J'ai changé ma fonction validateur pour vérifier la valeur de self.Canceled() directement au lieu de passer Annulée en tant que paramètre que je faisais avant d'utiliser le " params: "propriété du validateur. Tout fonctionne bien maintenant. Voici un violon mis à jour

http://jsfiddle.net/HtYCw/

Je serais toujours intéressé par les commentaires si quelqu'un a une meilleure façon de le faire.

Answer 2

Vous devez transmettre l'observable et non la valeur dans les options. Changer

if(params.Canceled == true) 

à

if(params.Canceled() == true) 

et passer l'observable. Changer

params: {Canceled:this.Canceled()} 

à

params: {Canceled:this.Canceled} 

Voici le violon mis à jour: http://jsfiddle.net/nEPNC/