2

如何设置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 模板上查看此特定用户配置文件中的字段“项目”。该模板还显示了一个“不喜欢”该项目的按钮。如果是这样，则该项目的用户 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>
4

1 回答 1

5

最惯用的方法是应用语义类——例如“喜欢”或“不喜欢”——然后在 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的相同助手，并且相似，但它会吸引不喜欢它的用户。userNamesdislikingUsers

/* css */

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

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

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

于 2014-10-29T10:41:49.480 回答