ノックアウトを使用したフォーム検証

Question

私は自分のプロジェクトでknockoutJSを使用しています。コードスニペットを以下に示します。

<input class="form-control" id="name" type="text" style = "width:100%" placeholder = "Enter name" data-bind="event:{keyup: checkDetails}"> 

<select class="form-control" id="type" style = "width:100%"> 
     <option>Type 1</option> 
     <option>Type 2</option> 
     <option>Type 3</option> 
     <option>Type 4</option> 
</select> 

<input class="form-control" id="date" type="date" style = "width:100%" data-bind="event:{click: checkDetails}"> 

<button type="button" class="btn btn-primary" id = "add_goal" data-bind = "enable:formFilled">Add Goal</button> 

<script type="text/javascript"> 
     function myViewModel() { 
      var self = this; 
      self.formFilled = ko.observable(false); 
      self.checkDetails = function(){ 
       console.log("hello"); 
       if($("#name").val() != "" && $("#date").val() != ""){ 
        self.formFilled = ko.observable(true); 
       } 
      }; 
      console.log(self.formFilled()); 
     } 
     ko.applyBindings(new myViewModel()); 
</script> 

は三つのフィールドがあると私はすべてのフィールドがいっぱいにされている場合のみ、「ゴールを追加」ボタンをアクティブにします。疑問は次のとおりです：HTML5カレンダーにどのイベントを追加すればよいのですか？ "checkDetails"関数の中でtrueに設定すると、ボタンがアクティブにならないのはなぜですか？

Answer 1

formFilledは観測可能なので、関数のように設定する必要があります。

if($("#name").val() != "" && $("#date").val() != ""){ 
    self.formFilled(true); 
} 
else { 
    self.formFilled(false); 
} 

また、あなたのdata-bind="event:{click: checkDetails}">は、クリックイベントを探している、私はこれがkeyupに変更する必要がありますね。