knockout.js - 在 knockoutjs 中使用选中的绑定(bind)时防止事件冒泡

Question

我正在使用 KnockoutJs 和 Twitter Bootstrap 构建一个 UI。

我正在使用 checked在名为 dropdown-toggle 的 Bootstrap 对话框中绑定(bind).

<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/

我已经尝试创建自己的绑定(bind)处理程序，它显式使用已检查的绑定(bind)和 event.preventDefault()和 event.stopPropagation()这使对话框打开，但阻止检查复选框。

任何指针？

Answer 1

听起来你在正确的轨道上。你基本上想做相当于:

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

或 这可以在自定义绑定(bind)中完成，例如:

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

除非您返回 true，否则 KO 附加的正常单击/事件处理程序将阻止默认操作。但是，如果我们连接我们自己的事件处理程序，那么我们只需要防止它冒泡。

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