How can I use Spacebars to use different CSS elements?

help
1

I’d like to use a different color for the header of my card. I thought that I could use Spacebars unique {{if condition for it but it seems it only works with boolean variables and not with a condition that is checking for a string:

Here’s my code:

{{#if type='ToDo'}}
    <div class="paper-card-header teal-header">
{{else}}
        {{#if type='Info'}}
            <div class="paper-card-header orange-header">
        {{else}}
            <div class="paper-card-header pink-header">
        {{/if}}
{{/if}}

I’d like to use the CSS element of teal-header for the condition that type==='ToDo', orange-header for the condition that type==='Info' andpink-headerfor every other value oftype`.

How can I achieve this or is it not possible to do within Meteor?

You can also answer this question at SO: http://stackoverflow.com/questions/35254933/meteor-how-can-i-use-spacebars-to-apply-different-css-elements

2

You’re going at it the wrong way. Instead of a helper that returns the type, have one that returns the style itself. <div class="paper-card-header {{ paperCardStyle }} ">

1 Like
3

for simple cases you can do things like this

<div class="{{#if done}}done{{else}}notdone{{/if}}">
  ...
</div>

but yes, for more flexibility do what @manuel is suggesting

In Attribute Values
A double-braced tag may be part of, or all of, an HTML attribute value:

<input type="checkbox" class="checky {{moreClasses}}" checked={{isChecked}}>

spacebars ref