流星条件 CSS

Question

如何将 设置background-color: #ccc为{{colorLike}}助手？此颜色用于列表项。

<template name="viewPost">
Names:
{{#each userNames}}
<li class="name"><a class="{{colourLike}}" href="{pathFor 'viewItem'}" >{{name}}</a></li>
{{/each}}
</template>

我还想{{colorDislike}} 在bacground-colour: #fff. 这样一来，如果某个元素存在于特定字段中，{{colourDislike}}则将覆盖{{colorLike}}. 我正在收集我可以通过“if”语句实现这一目标。

Template.viewPost.helpers({
    userNames: function(){
        var selectedPostId = Session.get('postId');
        var arrayOfLike = Posts.find({_id: selectedPostId}, {fields: {likes: 1}}).fetch();
        var sumArray = _.chain(arrayOfLike).pluck('likes').flatten().value();
            return Meteor.users.find({_id: {$in: sumArray}});
},
});

所选帖子来自单击帖子标题时创建的另一个模板的会话集。单击后，用户可以看到喜欢该帖子的所有用户名的列表。所以我的目标是让这些名字<li class="name"><a class="{{colourLike}}" href="{pathFor 'viewItem'}" >{{name}}</a></li>具有某种颜色。

当用户单击名称时，他们能够查看“项目”，它是 viewItem 模板上此特定用户配置文件中的一个字段。该模板还显示了一个“不喜欢”该项目的按钮。如果是，则项目的 userId 存储在 Post 文档的“dislike”字段中。

<template name="viewItem">
 {{profile.item}}
  <div class="dislike">
    <button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-remove"></span> Dislike
    </button>
 </div>
</template>

Answer 1

最惯用的方法是应用语义类——例如“喜欢”或“不喜欢”——然后在 CSS 中，将背景颜色应用于具有该类的元素。

{{#each likingUsers}}
  <li class="name"><a class="liked" href="{{pathFor 'viewItem'}}" >{{name}}</a></li>
{{/each}}
{{#each dislikingUsers}}
  <li class="name"><a class="disliked" href="{{pathFor 'viewItem'}}" >{{name}}</a></li>
{{/each}}

这likingUsers是userNames您已经编写的同一个帮助程序，并且dislikingUsers是相似的，但它得到了不喜欢它的用户。

/* css */

a.liked {
  background-color: #ccc;
}

a.disliked {
  background-color: #fff;
}

这样，如果您后来决定以不同方式设置喜欢/不喜欢的帖子的样式 - 例如将喜欢的帖子设为绿色，或在不喜欢的帖子上添加删除线 - 您只需更改 CSS，而不是 JS 代码或 HTML 模板。