淘汰赛无法使用扩展程序扩展多个观察值

这与我的另一个问题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

淘汰赛无法使用扩展程序扩展多个观察值

回答

相关问题