How do I make IF statements work? Is there a CASE / SWITCH Equivalent?

help
1

Is there some sort of equivalent to a CASE / SWITCH statement? I’ve tried using an IF to do something like this:

{{#each sites}}
{{#If siteStatus == ‘1’}}
// do this
{{/If}}
{{/each}}

but it doesn’t work either? I’m a NOOB, so I must be missing something very basic?

2

You need to make a blaze / handlebars helper for this. If statements in blaze do not have this capability out of the box. You need to write some code for it. Its very simple though.

Blaze / Handlebars Helper: (Not sure why you need a switch in this case)

Template.registerHelper('statusHelper', function(siteStatus) {
    switch(siteStatus) {
        case 1: 
            return true;
            break;
    }
});

Template:

{{#each sites}}
    {{#if statusHelper siteStatus}}
    //do something
    {{/if}}
{{/each}}
3 
Template.demo.helpers({
  howIfWorks : function() {
    return [
       {state: true}, {state: true}, {state: false}, {state: true},  {state: false},  {state: false},
     ];
  }
})
    <ul>
     {{#each howIfWorks}}
      {{#if state}}
        <li> Foo - @index </li>
      {{/if}}
    {{/each}}
   </ul>
  • Foo - 0
  • Foo - 1
  • Foo - 3
4

Thanks guys, will try that! Really appreciate the response!! :grinning:

5

Ok, so I’m missing something still I guess. What I’m trying to do is display an image in a table column based upon a siteStatus field in a collection. So if the siteStatus is “1”, display a green image, if it’s “2” display yellow image and so on.

I have this helper:

  Template.registerHelper('statusHelper', function(siteStatus) {
  switch(siteStatus) {
      case 1:
          return true;
          break;
      case 2:
          return true;
          break;
      case 3:
          return true;
          break;
  }

});

and I have this template:

<tbody>  
{{#each sites}}
<tr>
  <td>
    <input type="checkbox">
  </td>
  <td>
    {{#if statusHelper {{siteStatus}} }}
      <img src="/images/circle-green.png" alt="" class="img-circle">
    {{/if}}
    {{#if statusHelper {{siteStatus}} }}
      <img src="/images/circle-yellow.png" alt="" class="img-circle">
    {{/if}}
    {{#if statusHelper {{siteStatus}} }}
      <img src="/images/circle-red.png" alt="" class="img-circle">
    {{/if}}
  </td>
  <td>
    <small>{{startTime}}</small>
  </td>
 <td>
    <small>{{name}}</small>
  </td>
   </tr>
{{/each}}
<tbody>
6

Your parameter doesn’t need to be in a second set of braces, try just {{# if statusHelper siteStatus}}

This link might help, you may not need the case.

7

I would probably try something likes this

<img src="/images/circle-{{pickColor siteStatus}}.png" alt="" class="img-circle">

and helper something like

Template.registerHelper('pickColor', function(inputNumber) {
  switch(inputNumber) {
      case 1:
          return "green";
          break;
      case 2:
          return "yellow";
          break;
      case 3:
          return "red";
          break;
  }
8

That almost works I think, but

      <img src="/images/circle-{{statusHelper siteStatus}}.png" alt="" class="img-circle">

returns

http://localhost:3000/images/circle-.png

rather than the full image name.

I tried

      <img src="/images/circle-"{{statusHelper siteStatus}}".png" alt="" class="img-circle">

but that gives an error:

While processing files with templating (for target web.browser):
DPro_Dashboard.html:270: Expected space
…src="/images/circle-"{{statusHelper siteS…
^

9

maybe cause we registered it as pickColor and using it as statusHelper :smiley:

10

alternative to using Template helpers you can use handlebar helpers package

11

well, i would probably transform that collection to make it easier for me, but that is not answer to be given on forums without additional xy posts discussion how to do it in that exact case :smiley:

12

As we’re already in “what I would do” mode, personally I’d keep <img> in a subtemplate and make the helper for this particular subtemplate instead of global one. :wink:

13 
<img src="/images/circle-**"**{{statusHelper siteStatus}}**"**.png" alt="" class="img-circle">

I suspect the problem here is the extraneous quotae around the {{block}}… they are not needed and they will break the html

14

Again, I tried it both with and without those quotes:

  <img src="/images/circle-{{statusHelper siteStatus}}.png" alt="" class="img-circle">

returns an empty image url:

(http://localhost:3000/images/circle-.png
instead of: http://localhost:3000/images/circle-green.png)
15

and how your statusHelper code looks like ?

16 
> and how your statusHelper code looks like ?

And also how you’re getting siteStatus

because if you followed shock’s ‘pickColor’ exmaple from earlier, the method definitely works

17

I copied and pasted his code into my project and it’s not working correctly for me. It’s not giving an error. The issue is that it’s not returning a valid image (the color portion of the img tag is not getting returned by the helper. Hence I only get: images/circle-.png

I’m looping through a collection using {{#each sites}}

The collection is created on startup:

Sites = new Meteor.Collection("sites");

and a sample of the data is:

  var sites = [{
            client: 'NCR',
            project: 'Home Depot POS',
            siteNum: '1',
            siteName: 'Home Depot',
            siteStatus: '1',
            startDate: '10/01/2015',
            startTime: '8:00 AM',
           }
 ];

So it seems that the siteStatus value is not getting adding to the img tag, leaving the tag as images/circle-.png instead of images/circle-green.png, images/circle-yellow.png or images/circle-red.png.

18

But helper in my example have different name than the 1 you are showing us.
Just that.

19

Wow, I’m really sorry, but I’m just not getting it. I literally copied and pasted your exact code into my JS and HTML, and it’s giving the same results each time. Would it be because I added the HTML to a template instead of the body?

:confused:

20

Hi shock,

I’m still having the hardest time with this. I gave up on it for a bit, but now I’m coming back to it and hope you can point me towards what I’m doing wrong.

I have the following in my JS file:

  Template.registerHelper('pickColor', function(inputNumber) {
    switch(inputNumber) {
        case 1:
            return "green";
            break;
        case 2:
            return "yellow";
            break;
        case 3:
            return "red";
            break;
    }
  });

And my template looks like this:

<template name="mySites">
  <tbody>
    {{#each sites}}
    <tr>
      <td>
        <input type="checkbox">
      </td>
      <td>
        <img src="../images/circle-{{pickColor siteStatus}}.png" alt="" class="img-circle">
      </td>
      <td>
        <small>{{startTime}}</small>
      </td>
      <td>
        <address>
          <small>{{siteAddress}}
            <br>{{city}}, {{state}} {{zip}}</small>
        </address>
      </td>
      <td>
        <address>
          <small>{{techFirst}} {{techLast}}
            <br>{{techPhone}}
            <br>{{techEmail}}</small>
        </address>
      </td>
    </tr>
    {{/each}}
  </tbody>
</template>

Again, what is returned into the html page is this:

http://localhost:3000/images/circle-.png

But according to your code, I should be getting the correct url:

http://localhost:3000/images/circle-green.png)

Can you (or somebody) please help me with this?

Thanks in advance!