нокаутом невозможно удлинить несколько наблюдаемых с помощью удлинителя

Это связано с моим другим вопросом here! Я пытаюсь создать специальный расширитель проверки без использования библиотеки проверки.нокаутом невозможно удлинить несколько наблюдаемых с помощью удлинителя

Невозможно расширить мой удлинитель на несколько наблюдаемых. В приведенном ниже сценарии расширитель применяется в поле Пароль, но не в поле «Повторить пароль».

<!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>

источник

2016-07-07 Ramki

Я решил эту проблему успешно – Ramki

Я скопировал свой код в интерактивном сниппета и заметил, что произошла ошибка консоли ... Кроме того, не все пути в вашем computed возвращается значение.

Я исправил эти проблемы, и все работает так, как вы ожидали. Вы проверяли консоль перед публикацией?

Ошибки:

newValue не был определен

Компьютерная ошибка:

Вы должны создать подписку по телефону target() внутри метода вычисленной-х
Вы «набор «вычисляется путем возврата значения, а не computedObs(newVal)внутри способ.

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();" />

источник

2016-07-07 15:22:27 user3297291

упс. извините, мой плохой ... JS-отладка была отключена в моем IE. – Ramki

нокаутом невозможно удлинить несколько наблюдаемых с помощью удлинителя

ответ

Смежные вопросы