knockout.js – 在knockoutjs中使用检查的绑定时,防止事件冒泡

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

我在一个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()保持对话框打开,但是防止复选框被检查。

任何指针?

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

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

OR这可以在自定义绑定中完成,如:

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/

http://stackoverflow.com/questions/14321012/prevent-event-bubbling-when-using-the-checked-binding-in-knockoutjs

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:knockout.js – 在knockoutjs中使用检查的绑定时,防止事件冒泡