title: Knockout JS: Visible applies to all elements inside foreach: loop, instead of the current one
body: <p>Basically I want <code>visible:</code> to fire up only on the div i hover over, but it applies to all of them,
  no matter which one I hover over.</p>
  
  <p>I guess that makes sense, since I am binding to <code>visible:</code> inside <code>foreach:</code> loop, so it is applied to all of them. Is there a KnockoutJS work-around, or should I just use <code>$jQuery.hover()</code> to make it work instead?</p>
  
  <p><strong>Html:</strong></p>
  
  <pre><code>&lt;div&gt;
   &lt;div data-bind="foreach: hostGroups"&gt;
    &lt;div data-bind="css: { style: true }, event: { mouseover: $root.showDeleteLink, mouseout: $root.hideDeleteLink }"&gt;
     &lt;span data-bind="text: hostName"&gt;&lt;/span&gt;
     &lt;span class="delete-link" data-bind="visible: $root.deleteLinkVisible"&gt;this is a delete link&lt;/span&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>var data = [ 
      { "hostName": "server1" }, 
      { "hostName": "server2" }, 
      { "hostName": "server3" }
  ]; 
  
  var viewModel = {
  
      hostGroups: ko.observableArray(data),
  
      deleteLinkVisible: ko.observable(false),
  
      showDeleteLink: function() {
           viewModel.deleteLinkVisible(true);
      },
  
      hideDeleteLink: function() {
          viewModel.deleteLinkVisible(false);
      }
  
  };  
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/pruchai/KXtTU/3/" rel="nofollow">http://jsfiddle.net/pruchai/KXtTU/3/</a></p>