knockout visible binding with hover?

knockout.js

Solution

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:

- 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`.

- Use the built-in `checked` binding for binding the value of an `input type='checkbox' />`

Problem

Original source