javascript - Meteor conditional CSS -

javascript - Meteor conditional CSS -

how can set background-color: #ccc {{colorlike}} helper? colour used list items.

<template name="viewpost"> names: {{#each usernames}} <li class="name"><a class="{{colourlike}}" href="{pathfor 'viewitem'}" >{{name}}</a></li> {{/each}} </template>

i register helper {{colordislike}} in bacground-colour: #fff. that if element exists in particular field, {{colourdislike}} over-ride {{colorlike}}. i'm gathering can accomplish '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(); homecoming meteor.users.find({_id: {$in: sumarray}}); }, });

the selected post session set template created upon clicking post title. when clicked, user can see list of usernames of liked post. i'm aiming these names <li class="name"><a class="{{colourlike}}" href="{pathfor 'viewitem'}" >{{name}}</a></li> in colour.

when user clicks name, able view 'item' field in particular user profile on viewitem template. template displayed button 'dislike' item. if so, userid of item stored in 'dislike' field of 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>

the idiomatic way apply semantic class - e.g. "liked" or "disliked" - in css, apply background colour elements class.

class="lang-html prettyprint-override">{{#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 same usernames helper wrote, , dislikingusers similar, gets users disliked instead.

class="lang-css prettyprint-override">/* css */ a.liked { background-color: #ccc; } a.disliked { background-color: #fff; }

this way, if later decide style liked/disliked posts differently - e.g. create liked posts green, or set strikethrough on disliked posts - have alter css, not js code or html templates.

javascript css meteor spacebars