How to set Meteor helper to true for one of many templates?

Question

I'm stuck on how to properly set a boolean template helper to true for one item only and get that to the template . How do I do that?

I'm trying to set one of many articles to true, to display some additional information about the article. I might have 100 articles in a template. And I want to trigger a mouseover boolean on that particular template, then set a helper that is boolean to true upon the mouseover to trigger the display of additional html.

I've got the mouseover down:

'mouseover .hover-check': function () {
  console.log('hover-check works for *one* particular item');
  // need to set boolean here - tried the below code
  Session.set('showHover', true);    // Tried various versions of this...
}

For the above I also tried stuff like:

this.hover

Session.set('this.hover');

and

Session.set('this.hover', true);

but didn't get that to the template correctly. It does correctly get a single article though. So it seems that setting the variable correctly and getting that to the template is where my trouble is.

I also have a helper:

Template.articleItem.helper({
  showHover: function () {
  //Where I need help. I've tried:
  return showHover;  //Sets hoverCheck to true for each of 100 articles but I only want the hovered one to have hoverCheck as true
  }
});

There's also the question of how do I send the showHover === true to the template. I've tried various ways like:

{{showHover}} Which seems to be how the docs say to call it (although they don't show how to close it). And also {{#if showHover}}

Answer 1

Using reactivity for dealing with hover states is, slightly speaking, an overkill. Such things are easily handled by css alone:

<div class="box">
  <div class="boxContent">...</div>
  <div class="boxExtra">...</div>
</div>

.boxExtra {
  display: none;
}

.box:hover .boxExtra {
  display: block;
}

Answer 2

What you are trying to do sounds very similar to how a 'selected' player gets highlighted in the leaderboard example.

Since both your helper and your mouseover event have access to some context from the template calling them you can make use of that information.

// new event
'mouseover .hover-check': function () {
   Session.set('showHover', this._id);    //can be any field in the article that is unique between articles
}

//new helper
Template.articleItem.helpers({  //fix typo in helpers
  showHover: function () {
    return Session.equals( 'showHover', this._id );  //again I use _id but just match it to whatever you set with mouseover.
  }
});

And in your template your idea of using an #if block seems correct:

//in articleItem template
{{#if showHover}}
  extra content...
{{/if}}

It may also be easier just to include {{showHover}} in the articleItem template and then instead of return a boolean from your helper, return whatever it is you want to add. Text, a subtemplate...