24

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

checkedという名前の Bootstrap ダイアログ内でバインディングを使用していdropdown-toggleます。

<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()たが、チェックボックスがチェックされるのを防ぎます。

ポインタはありますか？

4

1 に答える 1

51

正しい方向に進んでいるようですね。基本的に、次と同等のことを行います。

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

またはこれは、次のようなカスタムバインディングで実行できます。

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

KOによってアタッチされた通常のクリック/イベントハンドラーは、trueを返さない限り、デフォルトのアクションを防ぎます。ただし、独自のイベントハンドラーを接続する場合は、バブリングを防ぐだけで済みます。

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

于 2013-01-14T15:28:33.753 に答える