knockout.js - 用悬停击倒可见绑定(bind)？

Question

我有以下内容:

<input type="checkbox" data-bind="visible: selectedItemsCount() > 0, attr: { value: itemId()}, checked: $parent.selectedFolderIds" />

我要做的是添加另一个条件，以便在用户将鼠标悬停在元素上时激活可见。有没有办法在可见绑定(bind)中做到这一点？就像是:

<input type="checkbox" data-bind="visible: selectedItemsCount() > 0 || isHovering(), attr: { value: itemId()}, checked: $parent.selectedFolderIds" />

Answer 1

通常，避免将逻辑直接放在 HTML 内的 Knockout 绑定(bind)中是一种很好的做法。不是世界末日，但它可以很快导致一条困惑的道路。

如果可能，请使用自定义绑定(bind)为您的可见性提供所需的 UI 行为。将该逻辑放在自定义绑定(bind)中很有用，因为它将实现细节与 View 分开。您稍后可能会决定，不是更改可见性，而是添加/删除一些 CSS 来控制外观，或者您可能想要添加一些动画。

这是一个非常简单的绑定(bind)，用于设置悬停时的可见性:

ko.bindingHandlers.hoverTargetId = {};
ko.bindingHandlers.hoverVisible = {
    init: function (element, valueAccessor, allBindingsAccessor) {

        function showOrHideElement(show) {
            var canShow = ko.utils.unwrapObservable(valueAccessor());
            $(element).toggle(show && canShow);
        }

        var hideElement = showOrHideElement.bind(null, false);
        var showElement = showOrHideElement.bind(null, true);
        var $hoverTarget = $("#" + ko.utils.unwrapObservable(allBindingsAccessor().hoverTargetId));
        ko.utils.registerEventHandler($hoverTarget, "mouseover", showElement);
        ko.utils.registerEventHandler($hoverTarget, "mouseout", hideElement);
        hideElement();
    }
};

像这样使用它:

<div><label id='hoverTarget'>Hover to see the details</label></div>
<div data-bind="hoverVisible: hasItems, hoverTargetId: 'hoverTarget'">Here's the details</div>

See the Fiddle

其他几个建议:

在 View 模型中定义一个属性，表示是否允许显示元素的应用程序逻辑，例如 hasItems .

使用 built-in checked binding用于绑定(bind) input type='checkbox' /> 的值