Geek asks and answers

Knockout visible snap with hover?

I have the following:

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

What I'm trying to do is add another conditional condition so that visibility is activated if the user hangs over an element. Is there a way to do this in a visible binding? Sort of:

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

In general, it is good practice not to inject the logic directly into the knockout binding in HTML. Not the end of the world, but it can quickly lead along a dirty road.

, . , . , / 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 the details</div>

:

  • , , , , hasItems.
  • checked input type='checkbox' />
+19
source

More articles:


All Articles