Предотвращение пузырьков событий при использовании проверенного связывания в knockoutjs

Я создаю пользовательский интерфейс с помощью KnockoutJs и Twitter Bootstrap.

Я использую привязку 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. Однако, если мы подключаем собственный обработчик событий, нам нужно только предотвратить его пузыри.

Пример: http://jsfiddle.net/MikeEast/PyNfg/1/