javascript - meteor 条件 CSS

Question

如何设置 background-color: #ccc到 {{colorLike}} helper ？此颜色用于列表项。

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

所选帖子来自单击帖子标题时创建的另一个模板的 session 集。单击后，用户可以看到喜欢该帖子的所有用户名的列表。所以我的目标是获得这些名字 <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 模板。