javascript - 如何使用knockout.js在特定条件下将点击事件绑定(bind)到body？

Question

我设计了一个下拉菜单(尝试在浏览器中一致地设置实际 <select> 元素的样式是徒劳的)，单击该菜单时，会显示下拉选项的无序列表。此功能是通过 Knockout.js 提供的，它使用可观察对象来检查是否应显示或隐藏下拉列表。 DOM 结构在这里:

<div id="actionsDropdown">
  <a data-bind="click: toggleDropdownVisibility, css: { active: showDropdown() == true }">Actions</a>
    <ul data-bind="visible: showDropdown">
      <li>Option 1</li>
      <li>Option 2</li>
    </ul>
</div>

这是我的 Knockout.js 代码:

self.showDropdown = ko.observable(false);
self.toggleDropdownVisibility = function () {
    console.log(self.showDropdown());
    self.showDropdown(!self.showDropdown());
};

除了一些事情之外，这工作得很好。

如果下拉列表已经可见，如何实现逻辑以在单击页面上的其他任何位置时也隐藏下拉列表？

我猜想我可以将点击处理程序绑定(bind)到 body元素，但如果它被关闭，它就会打开它，这显然不是最佳的。

Answer 1

看这个jsfiddle:

http://jsfiddle.net/dwp0etrg/9/

我刚刚创建了一个快速自定义绑定(bind)处理程序，它接受 showDropdown 并向文档添加事件监听器。当 showDropdown 为 true 时，它​​会绑定(bind)监听器，当为 false 时，它​​会删除它。

ko.bindingHandlers.dropdown = {
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var valueUnwrapped = ko.unwrap(value);
        if (valueUnwrapped) {
            $(document).on('click.dropdown', function (e) {
                var $target = $(e.target);
                if ($target.parents('#actionsDropdown').length === 0) {
                    value(false);
                }
            });
        } else {
            $(document).off('click.dropdown');
        }
    }
};

只需更改模板以使用绑定(bind)并将其传递给 showDropdown observable。

<div id="actionsDropdown"> 
    <a data-bind="dropdown: showDropdown, 
                  click: toggleDropdownVisibility,
                  css: { active: showDropdown() == true }">Actions</a>

    <ul data-bind="visible: showDropdown">
        <li>Option 1</li>
        <li>Option 2</li>
    </ul>
</div>