knockoutjsでチェックされたバインディングを使用するとイベントバブリングが発生しないようにする

Question

KnockoutJsとTwitter Bootstrapを使用してUIを構築しています。

私はdropdown-toggleと呼ばれるブートストラップダイアログ内でcheckedバインディングを使用しています。

<div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     Facets 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <!-- ko foreach: facets --> 
     <li> 
      <input type="checkbox" data-bind="checked: Visible" /> 
      <span data-bind="text: Name"></span> 
     </li> 
     <!-- /ko --> 
    </ul> 
</div> 

チェックボックスをオンにしたままでドロップダウンダイアログを開いたままにしておくことを除いて、すべてが問題ありません。ここで

は一例とフィドルです：http://jsfiddle.net/MikeEast/L3KfG/2/

私がチェック開かれた対話を残す明示的に一緒にevent.preventDefault()とevent.stopPropagation()との結合を使用していますが、チェックする]チェックボックスを防ぐ自分のバインディングのハンドラを作成しようとしています。

任意のポインタ？

Answer 1

正しい軌道に乗っているようです。デフォルトのアクションを防ぐことができますKOで取り付け

ko.bindingHandlers.stopBubble = { 
    init: function(element) { 
    ko.utils.registerEventHandler(element, "click", function(event) { 
     event.cancelBubble = true; 
     if (event.stopPropagation) { 
      event.stopPropagation(); 
     } 
    }); 
    } 
}; 

通常のクリック/イベントハンドラ：のようにカスタムバインディングで行うことができ

click: function() { return true; }, clickBubble: false 

ORこの：あなたは基本的に同等のものをやりたいですあなたが真実を返さない限り。ただし、独自のイベントハンドラを使用すると、バブルが発生しないようにする必要があります。

サンプル：http://jsfiddle.net/MikeEast/PyNfg/1/