Meteor + Blaze - If else statement

Question

Looking at this Using Blaze guide, it seems Blaze supports {{#if}} and {{else}} statements, but I have't seen examples of an if-else statement. Is this supported in Blaze? Or do I have to do an additional if block inside the else block, which can get ugly.

I tried {{else if}}, but that gave an error.

{{#if en}}{{text.en}}{{else if tc}}{{text.tc}}{{/if}}

Barrett

Answer 1

Spacebars uses the same control flow structure as handlebars so the answer is the same as this one. In your case:

{{#if en}}
  {{text.en}}
{{else}}
  {{#if tc}}
    {{text.tc}}
  {{/if}}
{{/if}}

Side note - one of the nice things about jade is that it supports else if.

---

Sometimes a better alternative is to move the logic into a helper like this:

Template.myTemplate.helpers({
  textValue: function() {
    if (this.en) {
      return this.text.tc;
    } else if (this.tc) {
      return this.text.tc;
    }
  }
});

<template name="myTemplate">
  <p>{{textValue}}</p>
</template>

Photometry

Thanks for your answer. But what if I have many many else if statements? Doing it this way is going to be ugly. There's no alternatives? – Barrett

Using templates alone, there is no alternative. I'd recommend adding a template helper to return the value you need. – Photometry

I don't know how to do that at the moment. I will read up on it. Thank you for your answer and clarification! I've used up all my votes for today. Will +1 tomorrow! – Barrett

Thank you for your answer and example. You've been a great help! – Barrett

I've just tried this and I had to change {{#else}} for {{else}}. – Dhiman

Thanks @canotto90 - I just fixed the mistake. – Photometry

Answer 2

The current version of Blaze supports else if - see below for a sample format and reference to the github issue resolution.

{{#if isUserProfile}}
    <h3>User Profile</h3>
{{else if isLawyerProfile}}
    <h3>Lawyer Profile</h3>
{{else}}
    <h3>Test</h3>
{{/if}}

Reference Link: GitHub Else If Issue Resoltion

Jodoin

Answer 3

Following on from @David Wheldon's excellent answer, it's also worth noting that you can pass parameters to your JavaScript helper functions from your Blaze template.

So, for example the code below selectively renders the options for a select list by calling the helper method with the line isSelected region customerCompany:

    {{#if isSelected region customerCompany}}
        <option value={{region._id}} selected>{{region.name}}</option>
    {{else}}
        <option value={{region._id}}>{{region.name}}</option>
    {{/if}}

and then in the js file:

isSelected: function (region, customer) {

    return customer.salesRegionId === region._id;
},

This approach of passing in your variables to your helpers is generally recommended to avoid the confusion that can the arise with the changing meaning of the this keyword when using templates.

Logorrhea