カスタムバインディングからKnockoutのクリックバインディングを呼び出す

Question

KnockoutJSで「条件付きクリック」バインディングを作成したいとします。基本的にKnockoutで使用するような標準的なクリックバインディングですが、添付された関数を実行するためには条件を満たしている必要があります。 私の場合、最良の選択肢は、カスタムバインディングハンドラを作成し、それが許可されていれば標準のクリックバインディングを呼び出すことです。

ko.bindingHandlers.safeClick = { 
    'init': function(element, valueAccessor, allBindingsAccessor, context) { 
     $(element).click(function() { 
      if(mycondition == true) { 
       // call the standard click binding here -> this is the part I don't know 
      } 
     }); 
    } 
} 

標準のクリックバインディングをこのカスタムバインディングに置き換えたいとします。したがって、クリックバインディングを正しい方法で呼び出すことが重要です。そのため、HTMLで提供されるすべてのパラメータが関数に渡されます。たとえば：あなたはカスタムバインディングで欠落している部分で私を助けることができれば

<a href="#" data-bind="click: basevm.gotopage.bind($data, '#homepage')">Home</a> 
<a href="#" data-bind="click: itemvm.activateItem">Activate</a> 

これらは、私はそれを非常に感謝し

<a href="#" data-bind="safeClick: basevm.gotopage.bind($data, '#homepage')">Home</a> 
<a href="#" data-bind="safeClick: itemvm.activateItem">Activate</a> 

で交換する必要があります。

Answer 1

ここで結着クリックを委任する正しい方法は以下の通りです：

• 元の機能を使用してください（例：valueAccessor()を使用）
• 新しいvalueaccessor関数を作成します。この関数では、条件を含む新しい関数が返され、元の関数が呼び出されます。そして、この新しい値のアクセッサーをclickバインディングに渡します。

だからあなたsafeClickは次のようになります。

ko.bindingHandlers.safeClick = { 
    'init': function (element, valueAccessor, allBindingsAccessor, 
         viewModel, bindingContext) { 
     var originalFunction = valueAccessor(); 
     var newValueAccesssor = function() { 
      return function() { 
       if (mycondition == true) 
        //pass through the arguments 
        originalFunction.apply(viewModel, arguments); 
      } 
     } 
     ko.bindingHandlers.click.init(element, newValueAccesssor, 
      allBindingsAccessor, viewModel, bindingContext); 
    } 
} 

デモJSFiddle。

これは最初のクリックで機能し、クリックイベントを手動で購読したりjQueryでトリガする必要はありません。

Answer 2

あなたは次のようにそれを呼び出すことができます。

ko.bindingHandlers.click.init(element, valueAccessor, allBindingsAccessor, context); 

EDIT： あなたがイベントに初めてをクリックして呼び出すmannualyことができます。

ko.bindingHandlers.safeClick = { 
    'init': function(element, valueAccessor, allBindingsAccessor, context) { 
     $(element).click(function() { 
      if(mycondition == true) { 
       ko.bindingHandlers.click.init(element, valueAccessor, allBindingsAccessor, context); 
      } 
     }); 
     if(mycondition == true) { 
      $(element).trigger('click'); 
     } 
    } 
}