2016-07-05 53 views
1

下面是我試圖實現的一個示例。我需要清除頁面模型中的密碼,使其不可見時,我不知道如何做到這一點。清除不可見的可觀察對象

<!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> 
    <script type="text/javascript" src="knockout.validation.min.js"></script> 
    Name:<input type="text" data-bind="value:Name" /><br /> 
    Already A User: <input type="checkbox" data-bind="checked:AlreadyUser" /><br /> 
    New Password:<input type="password" data-bind="value:Password,visible:PasswordVisible" /><br /> 
    <input type="button" value="Submit" onclick="validateModel();" /> 

    <script type="text/javascript" > 
     var pageModel; 
     ko.validation.init({ 
      registerExtenders: true, 
      messagesOnModified: true, 
      insertMessages: false, 
      parseInputAttributes: true, 
      messageTemplate: null 
     }, true); 

     //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); 
      //this field is only required when visible 
      self.Password = ko.observable('').extend({ required: { onlyIf: function() { return self.PasswordVisible(); }, message: 'Password Invalid' } }); 
      self.errors = ko.validation.group(self);     
     }; 

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

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

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

我不能當我計算PasswordVisiblePassword財產但在執行順序要創建清除。我不能交換它,因爲這會導致我的擴展程序需要驗證的問題。

+0

我回滾您的編輯與次級的問題,因爲,據我所知,這是一個新的,單獨的(但相關的)問題?隨意發佈另一個關於SO的問題,如果需要的話鏈接到這個問題,並解釋它是如何分開/不同的。這使得其他有類似問題的人更容易找到解決方案,並保持這個特定的線程精簡和清潔。 – Jeroen

回答

2

你可以簡單地這樣做:

<input type="password" data-bind="value:Password, visible:AlreadyUser" /> 

無需計算出的。然後在您的視圖模型:

self.Password = ko.observable('').extend({ 
    required: { 
     onlyIf: function() { 
     return self.AlreadyUser(); 
     }, 
     message: 'Password Invalid' 
    } 
}); 

編輯

我相信我沒有回答我原來的答覆你的問題。如果你想真正清楚self.Password()每當用戶取消選中(或支票)勢必self.AlreadyUser那麼你可以使用訂閱複選框:

self.AlreadyUser.subscribe(function(newVal){ 
    // reset password every time the value of self.AlreadyUser() changes 
    self.Password(''); 
}); 
+0

是的你是對的。非常感謝。不知道我錯過了一個明顯的東西,雖然... – Ramki

+0

我已經添加了一個額外的問題,你可以請看看它。 – Ramki