Meteor: How can I use Spacebars to apply different CSS elements?


Tags: javascript,css,meteor,spacebars

Problem :

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?



Solution :

You just need a helper to return the appropriate class:

Template.YOURTEMPLATE.helpers({
  headerClass: function () {
    var class = {
      'ToDo': 'teal-header',
      'Info': 'orange-header'
    }[this.type]
    return class || 'pink-header'
  }
})

Then in your template:

<div class="paper-card-header {{headerClass}}"></div>

Note that you can also use Spacebars subexpressions with an equals helper like below, but I don't think that's the right option for this situation where there are multiple possibilities:

Template.registerHelper('equal', (x, y) => x === y)

<div class="paper-card-header {{#if (equal type "Info")}}orange-header{{/if}}"></div>

Having a general equal helpers is often very useful anyway though.


    CSS Howto..

    how to bind newly created html element to its css

    How do i split user inputed text into individual characters?

    How to get rid of scrollbars around iframe

    How can I get an element to stay within the browser's window width when its content is wider?

    How to build a submenu with CSS?

    How to show Only 4 slides in a row using Bxslider

    How to make one div's height depended of another div's height?

    How to style a tag for current div with css?

    How to apply css to a dynamically created div?

    CSS: how to put one image and one block with two

    in one line not using float

    How to align both these elements in same line?

    How to include PHP code in CSS?

    How to make
    , , or list display tabular data as a table?

    How to extend css class

    How much client-side programming is needed when doing server-side programming?

    How to avoid loading CSS file for ipad sized devices ('between' mobile and full-sized)?

    How do I make a horizontal sitemap using UL?

    How to change size of SVG circle

    How to add slide animation when showing elements

    How to prevent bootstrap css class to override my custom css class

    How to keep text aligned with the middle of a textarea?

    css how to stretch center div to fill allowable area

    How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

    How do I remove a hover effect if the Element has focus?

    How to modify HTML inside PHP by CSS [closed]

    Simple Form button submit doesn't show in IE 8-7

    How to use the word-wrap property in CSS 2.1 and validate CSS

    I have a video background on my bootstrap page - how can I make it “fixed”?

    How to Set Up a Responsive Background-Image with CSS

    How to color every second row using jQuery when the number of element in a row is variable?