6

我有以下内容：

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

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

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

1 回答 1

20

通常，避免将逻辑直接放在 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>

见小提琴

其他几个建议：

  1. 在视图模型中定义一个属性，该属性表示是否允许显示元素的应用程序逻辑，例如hasItems.
  2. 使用内置checked绑定来绑定input type='checkbox' />
于 2013-05-01T13:47:30.663 回答