Question

I’m using jQuery templates (jquery.tmpl.js) to render content on a webpage and am experiencing an unexpected result.

A couple of the properties in my JSON object are

CanMovePrevious    false
CanSkipQuestion    false

And here’s a snippet from my template which is producing the unexpected result:

{{if CanMovePrevious}}
    <a id="previous"><span>${PreviousButtonText}</span></a>
{{/if}}
{{if CanSkipQuestion}}
    <a id="next"><span>${NextButtonText}</span></a>
{{else}}
    <a id="next" class="hideV"><span>${NextButtonText}</span></a>
{{/if}}

I’ve included the CanMovePrevious condition because this works as expected: in the case of the above JSON data the CanMovePrevious elements are not rendered.

However, in the case of the CanSkipQuestion condition, and using the above JSON data, the markup is actually rendered as

<a id="next" class=""><span>Next</span></a>

Which is kind of a mix between the two options.

If the CanSkipQuestion property is true then the markup rendered is as expected, i.e.

<a id="next"><span>Next</span></a>

If I change the name of the class then it appears as expected, i.e.

<a id="next" class="myClass"><span>Next</span></a>

Can anyone explain why the class name “hideV” is not being rendered when CanSkipQuestion is set to false?

Answer 1

In your code
{{if CanSkipQuestion}}
is only making sure that CanSkipQuestion exists, if it does it will go inside and create HTML.

If you want your condition to work on the value of CanSkipQuestion you need to change conditions in template like this {{if CanSkipQuestion == true}} .