淘汰賽無法使用擴展程序擴展多個觀察值

這與我的另一個問題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

淘汰賽無法使用擴展程序擴展多個觀察值

回答

相關問題