Question

我有以下内容：

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

我要做的是添加另一个条件，以便在用户将鼠标悬停在元素上时激活visible。在可见绑定中有没有办法做到这一点？类似的东西：

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

Answer 1

通常，避免将逻辑直接放在HTML中的Knockout绑定中是一种很好的做法。不是世界末日，但它可以迅速导致一条混乱的道路。

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

这是一个非常简单的绑定，用于设置悬停的可见性：

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

其他一些建议：

在视图模型中定义一个属性，该属性表示是否允许显示该元素的应用程序逻辑，例如hasItems。
使用built-in checked binding绑定input type='checkbox' />

用悬停敲出可见的绑定？

1 个答案: