将 CSS 应用于 Meteor JS 中的菜单问题？答案

【问题标题】：Apply CSS to Menu Issue in Meteor JS?将 CSS 应用于 Meteor JS 中的菜单问题？
【发布时间】：2014-02-25 12:25:55
【问题描述】：

我需要将 CSS 应用于仅在 Meteor JS 中选择的菜单列表吗？我已经这样做了，但它选择了所有菜单列表的颜色。谁能告诉我为什么我的代码不起作用？

HTML代码：

<div class="mhome">
      {{#each menuitems}}
         <div class="menu">
               <div class="menulist {{isselected}}">{{this}}</div>
          </div>
      {{/each}}
</div>

JS 代码：

var selectItemName;
var ItemList = [
                 'A','B', 'C', 'D', 
                 'E','F', 'G',
                 'H', 'I', 'J', 'K'
               ]

Template.mhome.menuitems = function ()
 {
   return ItemList;
 };

Template.mhome.events
 ({
    'click .menulist': function (e,t)
     {
      if (typeof console !== 'undefined')
      console.log("You pressed the MENU ITEMS Button");
      e.preventDefault();
      console.log("this.name="+e.target.innerHTML);
      selectItemName = e.target.innerHTML;
      Session.set("selectedItem", selectItemName);
      if(e.target.innerHTML == "F")
         {
          console.log(">>>>>>>>>>>>F");
          Session.set('ContentItemTemplate', 'f');
         }

     }
 });
//For CSS
Template.mhome.isselected = function ()
{
 return Session.equals("selectedItem", selectItemName) ? "selected" : '';
};

CSS：

.menulist.selected
 {
  color: red;
 }

【问题讨论】：

标签： javascript html css meteor

【解决方案1】：

问题出在您的 isselected 模板助手中。

Session.equals("selectedItem", selectItemName) 的计算结果始终为 true，因为您在单击事件处理程序中将其设置为相同的值。

试试这个：

Template.mhome.isselected = function ()
{
    return Session.equals("selectedItem", this.toString()) ? "selected" : '';
};

【讨论】：