在knockoutjs中使用选中的绑定时防止事件冒泡

Question

我正在使用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()留下打开了对话,但防止被检查的复选框.

有什么指针吗？

Answer 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(); 
         }
    });
  }
};

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

示例:http://jsfiddle.net/MikeEast/PyNfg/1/