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()。
何かヒントはありますか?
ベストアンサー1
どうやら正しい方向に進んでいるようですね。基本的には、以下と同等のことをしたいのです。
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 を返さない限り、デフォルトのアクションを防止します。ただし、独自のイベント ハンドラーを接続する場合は、バブリングを防止するだけで済みます。