knockout.js - Prevent event bubbling when using the checked binding in knockoutjs

Question

I'm building a UI using KnockoutJs and Twitter Bootstrap.

I'm using the checked binding inside a Bootstrap dialogue called 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>

Everything is fine except that I would like the drop down dialogue to remain opened when checking the checkboxes.

Here is a fiddle with an example: http://jsfiddle.net/MikeEast/L3KfG/2/

I have tried creating my own binding handler which uses the checked binding explicitly together with event.preventDefault() and event.stopPropagation() which leaves the dialogue opened, but prevents the checkbox to be checked.

Any pointers?

Answer 1

It sounds like you were on the right track. You basically want to do the equivalent of:

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

OR This could be done in a custom binding like:

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

The normal click/event handler attached by KO will prevent the default action unless you return true. However, if we hook up our own event handler, then we only need to prevent it from bubbling.

Sample: http://jsfiddle.net/MikeEast/PyNfg/1/