CODEWITHSUNDEEP
meteorhandlebars.js
Kyle Bachan
Kyle Bachan

Reputation: 1107

Passing variables into Meteor templates and using said variables in handlebar if statements

I am trying to pass a variable into a Meteor.js template and then use the variable in an if statement (in said template). One solution I could do is to simply use three separate templates rather than divide one template up using if statements, but I'm wondering if there is a better way to execute this. I know you can't use {{}} inside other {{}}'s, and handlebar if statements also don't seem to handle equality comparisons.

Here's my code (idType is the variable I'm passing through):

<template name="license">
    {{> idForm idType="license"}}
</template>

<template name="idForm">
    <form class="idForm">
        {{#if idType=="license"}}
            <span>Driver's License Details</span>
            <input type="text" id="su-licenseNo" placeholder="License Number" />
            <input type="text" id="su-surname" placeholder="Surname" />
            <input type="text" id="su-givenNames" placeholder="Given Names" />
            <input type="text" id="su-dateOfIssue" placeholder="Date Of Issue" />
            <input type="text" id="su-dateOfExpiry" placeholder="Date Of Expiry" />
            <input type="text" id="su-height" placeholder="Height" />
        {{/if}}

        {{#if idType=="passport"}}
            <span>Passport Details</span>
            <input type="text" id="su-type" placeholder="Type" />
            <input type="text" id="su-issuingCountry" placeholder="Issuing Country" />
            <input type="text" id="su-passportNo" placeholder="Passport Number" />
            <input type="text" id="su-surname" placeholder="Surname" />
            <input type="text" id="su-givenNames" placeholder="Given Names" />
            <input type="text" id="su-nationality" placeholder="Nationality" />
            <input type="text" id="su-dateOfIssue" placeholder="Date Of Issue" />
            <input type="text" id="su-dateOfExpiry" placeholder="Date Of Expiry" />
        {{/if}}

        {{#if idType=="sin"}}
            <span>SIN Details</span>
            <input type="text" id="su-surname" placeholder="Surname" />
            <input type="text" id="su-givenNames" placeholder="Given Names" />
            <input type="text" id="su-number" placeholder="SIN" />
        {{/if}}

        <button>Submit!</button>
    </form>
</template>

Upvotes: 0

Views: 297

Answers (1)

Michel Floyd
Michel Floyd

Reputation: 20256

You can't do the comparison in the {{#if ...}} handlebar statements, {{#if idType=="license"}} isn't valid handlebars syntax.

You can get around this by making a comparison helper or you can alter your usage slightly and do:

<template name="license">
  {{> idForm isLicense=1}}
</template>

<template name="idForm">
  <form class="idForm">
    {{#if isLicense}}
      ...
    {{/if}}
    {{#if isPassport}} <!-- this will be false since it was omitted -->
      ...
    {{/if}}
  </form>
</template>

Upvotes: 1

Related Questions