2016-07-05 19 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> 

私はPasswordプロパティは、実行の順序で作成することがまだあるように私はPasswordVisibleを計算していたときにクリアすることはできませんよ。エクステンダーに必要な検証の問題を引き起こす可能性があるため、交換することはできません。

+0

を、私は、二次的質問で、あなたの編集をロールバックしました:あなたが実際に明確なself.Password()するたびにユーザーのチェックを解除(または小切手)にself.AlreadyUserにバインドされたチェックボックスを望むなら、あなたは購読使用することができますなぜなら、私が言うことができる限り、それは新しい、別個の(ただし関連する)質問だったからです。必要に応じてこれにリンクして、別の質問を投稿して、それがどのように別々の/異なっているかを説明してください。これにより、同様の問題を抱える他の人がソリューションを見つけやすくなり、この特定のスレッドをリーンかつクリーンに保ちます。 – Jeroen

答えて

2

あなたは、単にこれを行うことができます:全ての計算のための

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

必要がありませんが。次に、あなたのViewModelに:

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

編集

私は私のオリジナルの答えであなたの質問に答えることができなかったと信じています。

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

はい、あなたは正しいです。本当にありがとう。私は明らかなものを逃した方法を確信していません... – Ramki

+0

私は追加の質問を追加しました。 – Ramki