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

相关问题