knockout kann mehrere Observable mit Extender nicht erweitern

Dies ist mit meiner anderen Frage here verwandt! Ich versuche, einen benutzerdefinierten Validierungs-Extender ohne Verwendung der Validierungsbibliothek zu erstellen.knockout kann mehrere Observable mit Extender nicht erweitern

Ich bin nicht in der Lage, meinen Extender auf mehrere Observable zu erweitern. Im folgenden Szenario wird der Extender auf das Feld Passwort angewendet, nicht jedoch auf das Feld Passwort wiederholen.

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="knockout-3.4.0.js"></script> 

    Name:<input type="text" data-bind="value:Name" /><br /> 
    Already A User: <input type="checkbox" data-bind="checked:AlreadyUser" /><br /> 
    Password:<input type="password" data-bind="value:Password,visible:PasswordVisible" /><br /> 
    Retype Password:<input type="password" data-bind="value:RetypePassword,visible:PasswordVisible" /><br /> 
    <input type="button" value="Submit" onclick="validateModel();" /> 

    <script type="text/javascript" > 
     var pageModel; 

     ko.extenders.Validate = function (target, validateOptions) { 
      target.HasErrors = ko.computed(function() { 
       var newValue = target(); 

       var required = validateOptions.required(); 
       var validationType = validateOptions.validationType;     

       if (ko.unwrap(required)) { 
        switch (validationType) { 
         case "Text": 
          return newValue == ''; 
         default: 
          target.HasErrors(false); 
          break; 
        } 
       } 
       return false; 
      }, null, { deferEvaluation: true }).extend({ notify: 'always' });    
      return target; 
     }; 

     //The model itself 
     var ViewModel = function() { 
      var self = this; 
      self.Name = ko.observable(''); 
      self.AlreadyUser = ko.observable(false); 
      //computed variable that sets the visibility of the password field. I have to clear the password when am making it invisible 
      self.PasswordVisible = ko.computed(function() { return !this.AlreadyUser(); }, this).extend({ notify: 'always' }); 
      //this field is only required when visible 
      self.Password = ko.observable('').extend({ Validate: { required: function() { return self.PasswordVisible(); }, validationType: "Text" } }); 
      self.RetypePassword = ko.observable('').extend({ Validate: { required: function() { return self.PasswordVisible(); }, validationType: "Text" } });       
      self.AlreadyUser.subscribe(function (newVal) { self.RetypePassword(''); }); 
      self.HasErrors = ko.computed(function() { return self.Password.HasErrors() && self.RetypePassword.HasErrors(); }, self); 
     }; 

     //The method calls on click of button 
     function validateModel() { 
      alert(pageModel.HasErrors()); 
     } 

     //create new instance of model and bind to the page 
     window.onload = function() { 
      pageModel = new ViewModel(); 
      ko.applyBindings(pageModel); 
     }; 

    </script> 
</body> 
</html>

Quelle

2016-07-07 Ramki

Ich habe dieses Problem erfolgreich – Ramki

ich Ihren Code einen interaktiven Schnipsel kopiert und bemerkte, dass es eine Konsole Fehler war ... Auch ist nicht alle Pfade in Ihrem computed Wert zurückgegeben.

Ich habe diese Probleme behoben und alles funktioniert wie erwartet. Hast du die Konsole vor dem Posten überprüft?

Fehler:

newValue wurde nicht

Computed Fehler definiert:

Sie haben ein Abonnement zu erstellen, indem target() innerhalb der berechneten Methode
You „Set Aufruf "Die Berechnung erfolgt durch Rückgabe eines Wertes, nicht durch computedObs(newVal)innerhalb die Methode.

var pageModel; 
 

 
ko.extenders.Validate = function(target, validateOptions) { 
 
    target.HasErrors = ko.computed(function() { 
 
    var required = validateOptions.required(); 
 
    var validationType = validateOptions.validationType; 
 
    var newValue = target(); 
 
    
 
    if (ko.unwrap(required)) { 
 
     switch (validationType) { 
 
     case "Text": 
 
      return newValue == ''; 
 
     default: 
 
      return false 
 
     } 
 
    } 
 
    return false; 
 
    }, null, { 
 
    deferEvaluation: true 
 
    }).extend({ 
 
    notify: 'always' 
 
    }); 
 
    return target; 
 
}; 
 

 
//The model itself 
 
var ViewModel = function() { 
 
    var self = this; 
 
    self.Name = ko.observable(''); 
 
    self.AlreadyUser = ko.observable(false); 
 
    //computed variable that sets the visibility of the password field. I have to clear the password when am making it invisible 
 
    self.PasswordVisible = ko.computed(function() { 
 
    return !this.AlreadyUser(); 
 
    }, this).extend({ 
 
    notify: 'always' 
 
    }); 
 
    //this field is only required when visible 
 
    self.Password = ko.observable('').extend({ 
 
    Validate: { 
 
     required: function() { 
 
     return self.PasswordVisible(); 
 
     }, 
 
     validationType: "Text" 
 
    } 
 
    }); 
 
    self.RetypePassword = ko.observable('').extend({ 
 
    Validate: { 
 
     required: function() { 
 
     return self.PasswordVisible(); 
 
     }, 
 
     validationType: "Text" 
 
    } 
 
    }); 
 
    self.AlreadyUser.subscribe(function(newVal) { 
 
    self.RetypePassword(''); 
 
    }); 
 
    self.HasErrors = ko.computed(function() { 
 
    return self.Password.HasErrors() && self.RetypePassword.HasErrors(); 
 
    }, self); 
 
}; 
 

 
//The method calls on click of button 
 
function validateModel() { 
 
    alert(pageModel.HasErrors()); 
 
} 
 

 
//create new instance of model and bind to the page 
 
window.onload = function() { 
 
    pageModel = new ViewModel(); 
 
    ko.applyBindings(pageModel); 
 
};

.has-error { 
 
    background:red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
Name: 
 
<input type="text" data-bind="value:Name" /> 
 
<br />Already A User: 
 
<input type="checkbox" data-bind="checked:AlreadyUser" /> 
 
<br />Password: 
 
<input type="password" data-bind="value:Password, visible:PasswordVisible, css: {'has-error': Password.HasErrors }" /> 
 
<br />Retype Password: 
 
<input type="password" data-bind="value:RetypePassword,visible:PasswordVisible, css: {'has-error': RetypePassword.HasErrors }" /> 
 
<br /> 
 
<input type="button" value="Submit" onclick="validateModel();" />

Quelle

2016-07-07 15:22:27 user3297291

oops gelöst. sorry my bad ... JS Debugging war in meinem IE ausgeschaltet. – Ramki

knockout kann mehrere Observable mit Extender nicht erweitern

Antwort

Verwandte Themen