CODEWITHSUNDEEP
meteormeteor-blaze
dayuloli
dayuloli

Reputation: 17051

Meteor + Blaze - If else statement

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}}

Upvotes: 32

Views: 40175

Answers (3)

Mike
Mike

Reputation: 188

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

Upvotes: 7

tomRedox
tomRedox

Reputation: 30543

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.

Upvotes: 5

David Weldon
David Weldon

Reputation: 64342

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>

Upvotes: 60

Related Questions