類似のロジックを持つ2つのノックアウト・ディレクティブを組み合わせる

Question

私には「キャンセル」ボタンがあります。クリックすると、確認ダイアログが表示され、ユーザーが実際にデータを入力して失われたかどうかを尋ねることができます（変更を加えた場合）。変更しなかった場合はフォームを非表示にします。

私は変数canSaveを持っています。これはフォームに変更があるかどうかを検出するのに役立ちます。

cancel - すべてのデータを消去してフォームを非表示にする方法。

これは私が試したことですが、これは何もしませんでした。

<button data-bind="click: canSave ? function(){openConfirmation(!openConfirmation());} : cancel" type="reset" class="btn btn-default">Cancel</button> 

初期コード：

<button data-bind="toggleClick: openConfirmation" type="reset" class="btn btn-default">Cancel</button> 

toggleClickは、いくつかのブール変数を切り替える変更するカスタムディレクティブです。

<!-- ko if: canSave --> 
    <confirmation-modal class="delete-confirm-popup" params="showDialog : openConfirmation, bodyHtml: 'Your changes will not be saved.<br/> Do you want to continue?', confirmCallBack: cancel"></confirmation-modal> 
    <!-- /ko --> 

いくつかの変更があります保存して、私は確認を示してきました...しかし、ここで私は（私の場合は何も起こりません）[キャンセル]ボタンのときは変化し、ユーザーのクリックケースのケースを逃しませんしました。

click（変更がない場合）とtoggleClick（変更がある場合）の2つの指示をどのように組み合わせることができますか？

ありがとうございました。

Answer 1

クリックイベントでは1つの機能しか持たず、変更を求める必要がある場合は関数内で機能させることができます。ここで

は簡単な例です：https://jsfiddle.net/kyr6w2x3/110/

HTML：

<form data-bind="visible:ShowForm"> 
    <input type="text" data-bind="textInput:Input"> 
    <input type="button" value="Cancel" data-bind="click:CancelForm"> 
</form> 


<div data-bind="text:Status"> 

</div> 

JS：

var MainViewModel = function() { 
    var self = this; 
    self.Input = ko.observable(); 
    self.Status = ko.observable(); 
    self.ShowForm = ko.observable(true); 
    self.canSave = ko.observable(false); 
    self.Input.subscribe(function(newValue){ 
     if(newValue){ 
      self.canSave(true); 
      } 
     }) 
    self.CancelForm = function(){ 
     if(self.canSave()){ 
      self.Status("there is a change that needs to be asked the user"); 
      }else{ 
      self.ShowForm(false); 
      self.Status("there is no change so the form got hidden") 
      } 
     } 
    }; 
ko.applyBindings(new MainViewModel());