KO binding: Hover groups

by whelkaholism

HTML

<table>
  <tbody>
  <tr data-bind="hovergroup: '1'"><td>1a</td></tr>
  <tr data-bind="hovergroup: '1'"><td>1b</td></tr>
  <tr data-bind="hovergroup: '2'"><td>2a</td></tr>
  <tr data-bind="hovergroup: '2'"><td>2b</td></tr>
  <tr data-bind="hovergroup: '3'"><td>2a</td></tr>
  <tr data-bind="hovergroup: '3'"><td>2b</td></tr>
</tbody>
</table>

CSS

tr.hover-group.hover {
  background: red;
}

JavaScript

ko.bindingHandlers.hovergroup = {
        init:
            function(el, f_valueaccessor, allbindings, viewmodel, bindingcontext)
            {
              var group = ko.unwrap(f_valueaccessor());

              if(!!group)
              {
                el.classList.add('hover-group');
                el.classList.add('--hg-' + group);
                el.addEventListener('mouseover', function() {
                  [].forEach.call(document.getElementsByClassName('--hg-' + group), function(x) {
                    x.classList.add('hover');
                  });
                });
                el.addEventListener('mouseout', function() {
                  [].forEach.call(document.getElementsByClassName('--hg-' + group), function(x) {
                    x.classList.remove('hover');
                  });
                });
              }
            }
 }

 ko.applyBindings(new function() {})