hover binding using event handlers

by blugrasmaniac

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<label id='checkBox1'>
    <input type='checkbox' data-bind="checked:hasItems" />Has Items</label>
<div>
    <label id='hoverTarget'>Hover to see the details</label>
</div>
<div data-bind="hoverVisible: hasItems, hoverTargetId: 'hoverTarget'">Here's the details</div>

JavaScript

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

    var vm = {
        hasItems: ko.observable(true)
    }

    ko.applyBindings(vm);