Meteor conditional CSS

Question

How can I set the background-color: #ccc to the {{colorLike}} helper? This colour is used for the list items.

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

I would also like to register another helper {{colorDislike}} in bacground-colour: #fff. This is so that that if an element exists in a particular field, {{colourDislike}} will over-ride {{colorLike}}. I'm gathering I can achieve this with an 'if' statement.

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

The selected post is from the session set from another template created upon clicking the post title. When clicked, the user can see a list of all the userNames of those that liked the post. So I'm aiming to get these names <li class="name"><a class="{{colourLike}}" href="{pathFor 'viewItem'}" >{{name}}</a></li> to be in a certain colour.

When the user clicks the name, they are able to view the 'item' which is a field in this particular user profile on the viewItem template. This template also displayed a button to 'dislike' the item. If so, the userId of the item is stored in the 'dislike' field of the Post document.

<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>

can you also show us the helper code. what does the colorlike helper return — Prabhu Murthy, Oct 29 '14 at 10:35
This is what I do not know how to do, I was referencing http://stackoverflow.com/questions/12127076/dynamically-set-a-css-property-based-on-a-template-value — meteorBuzz, Oct 29 '14 at 10:42
how like/dislike is decided. does your title object has any property that says it is likeable? — Prabhu Murthy, Oct 29 '14 at 10:44
No, basically, these are all user user ids that exists in an array within a 'liked' field. This document is within a Post collection. Essentially, I am returning Meteor.users.find({_id: {$in: sumArray}}), sorry, Ive pasted the wrong part of my code, these are usernames. Please bare with me I will make the change — meteorBuzz, Oct 29 '14 at 10:51

user3374348 · Accepted Answer · 2014-10-29T12:15:57.220

5

The most idiomatic way to do this is to apply a semantic class - e.g. "liked" or "disliked" - then in the CSS, apply the background colour to elements with that class.

{{#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}}

Here likingUsers is the same userNames helper you already wrote, and dislikingUsers is similar, but it gets the users who disliked it instead.

/* css */

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

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

This way, if you later decide to style liked/disliked posts differently - e.g. make liked posts green, or put a strikethrough on the disliked posts - you only have to change CSS, not JS code or HTML templates.

edited Oct 29 '14 at 12:15

answered Oct 29 '14 at 10:41

user3374348

4,101
15
29

This code seems most logical. However, I am getting the following error in the browser console. Have you seen this before?..."Route dispatch never rendered. Did you forget to call this.next() in an onBeforeAction?" – meteorBuzz Oct 29 '14 at 11:34
That seems like an unrelated issue, there must be something wrong with your router. – user3374348 Oct 29 '14 at 11:38
I'll look into this. Thanks for your input! I'm not sure if this has anything to do with updating to meteor v1 a moment ago. I put the code back to how it before was and I'm still getting this error. – meteorBuzz Oct 29 '14 at 11:49
I updated to meteor 1.0 and got the same error, but I did remember seeing something about a non backwards-compatible change in Iron Router. – user3374348 Oct 29 '14 at 12:08
1

Here's how I fixed it: https://github.com/EventedMind/iron-router/blob/devel/README.md#hooks – user3374348 Oct 29 '14 at 12:10
Thanks for the feedback. If you find a way around this issue, please post on the following link. http://stackoverflow.com/questions/26629835/meteor-v-1-0-and-ironrouter – meteorBuzz Oct 29 '14 at 12:10

Meteor conditional CSS

1 Answers1