knockout visible binding with hover?

Question

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 so that visible is activated if the user hovers over the element. Is there any way to do this within the visible binding? Something like:

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

Answer 1

In general, it's a good practice to avoid putting logic directly in your Knockout binding within HTML. Not the end of the world, but it can quickly lead down a messy road.

If possible, use a custom binding to provide the desired UI behavior for your visibility. It is useful to put that logic inside a custom binding, because it separates the implementation details from the view. You may decide later that instead of changing the visibility, you want to add/remove some CSS to control the appearance, or maybe you want to add some animation.

Here's a very simple binding that sets the visibility on hover:

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();
    }
};

Use it like this:

<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

---

A couple other recommendations:

1. Define a property in your view model that represents the application logic of whether the element is allowed to be displayed, say something like hasItems.
2. Use the built-in checked binding for binding the value of an input type='checkbox' />