Meteor 条件 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>

我还想在bacground-colour: #fff 中注册另一个助手{{colorDislike}}。这样如果元素存在于特定字段中，{{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 模板上查看此特定用户配置文件中的字段“item”。该模板还显示了一个“不喜欢”该项目的按钮。如果是这样，则该项目的用户 ID 存储在 Post 文档的“不喜欢”字段中。

<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 模板。