如何将 Meteor 助手设置为多个模板之一的 true？答案

【问题标题】：How to set Meteor helper to true for one of many templates?如何将 Meteor 助手设置为多个模板之一的 true？
【发布时间】：2014-05-02 16:25:15
【问题描述】：

我被困在如何正确地将布尔模板帮助器设置为 true 仅用于一个项目并将其传递给模板。我该怎么做？

我正在尝试将许多文章之一设置为 true，以显示有关该文章的一些附加信息。我可能在一个模板中有 100 篇文章。我想在该特定模板上触发 mouseover 布尔值，然后在 mouseover 上设置一个布尔值为 true 的帮助器以触发其他 html 的显示。

mouseover 已关闭：

'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...
}

对于上述内容，我还尝试了以下内容：

this.hover

Session.set('this.hover');

和

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

但没有正确地把它放到模板中。它确实正确地得到了一篇文章。因此，似乎正确设置变量并将其放入模板是我的麻烦所在。

我还有一个帮手：

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

还有一个问题是如何将showHover === true 发送到模板。我尝试了各种方法，例如：

{{showHover}} docs say to call it 似乎是这样的（尽管他们没有显示如何关闭它）。还有{{#if showHover}}

【问题讨论】：

标签： jquery templates event-handling meteor view-helpers

【解决方案1】：

您尝试执行的操作听起来与在leaderboard example 中突出显示“选定”玩家的方式非常相似。

由于您的助手和鼠标悬停事件都可以从调用它们的模板中访问某些上下文，因此您可以利用该信息。

// 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.
  }
});

在您的模板中，您使用#if 块的想法似乎是正确的：

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

在 articleItem 模板中包含 {{showHover}} 也可能更容易，而不是从您的助手返回布尔值，而是返回您想要添加的任何内容。文本，子模板...

【讨论】：

我想我会花更多时间在 Meteor 的例子上！！

【解决方案2】：

稍微来说，使用反应性来处理悬停状态是一种矫枉过正的做法。这样的事情只用 css 就可以轻松处理：

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

.boxExtra {
  display: none;
}

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

【讨论】：