0

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>
Kyle Bachan
  • 1,053
  • 2
  • 15
  • 33

1 Answers1

1

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>
Community
  • 1
  • 1
Michel Floyd
  • 18,793
  • 4
  • 24
  • 39
  • Good idea! I'll most likely go with this method. Thanks a bunch. – Kyle Bachan Aug 25 '15 at 21:44
  • I've just run into an issue using this method--when I add the variable isLicense into the template call, it overwrites all the other variables that are being initialized via the helper (all of the returned objects are blank). Any ideas? – Kyle Bachan Aug 26 '15 at 15:39
  • You'd have to post your helper code. Also don't know the data context your helpers are operating on. Check in your helpers that *this* is correct. [Docs on hash arguments](http://handlebarsjs.com/block_helpers.html#hash-arguments) – Michel Floyd Aug 26 '15 at 16:10
  • Yes, it turned out I was overwriting the data context. I found the solution here: http://stackoverflow.com/questions/28015971/pass-parameters-to-template-without-overriding-data-context. Thanks for your help. – Kyle Bachan Aug 26 '15 at 17:55