Handlebars doesn't render boolean variables when false

Question

Handlebars.js has some weird behavior. It renders a boolean with a value of true as the string "true", but a value of false as "".

var booleanTestTrue = true;
var booleanTestFalse = false;

Template:

True: {{booleanTestTrue}}
False: {{booleanTestFalse}}

Renders to:

True: true
False: (empty string)

Is there any way to fix this problem? Or do I have to write a helper?

Answer 1

You can use a simple block helper and implement #if like the following:

{{#if isTrue}}
       true
{{else}}
       false
{{/if}}

Answer 2

If you want to print a string, you should pass a string.

false.toString();

Otherwise, yeah you would need a helper (unless you use the #if|#unless helpers to output a string).

On a side note, if you wanted to print these values for debugging purpose, use the {{log booleanTestFalse}}.

Answer 3

I was surprised by this, and ended up writing a simple helper for it:

Handlebars.registerHelper( 'toString', function returnToString( x ){
    return ( x === void 0 ) ? 'undefined' : x.toString();
} );

You would then invoke it as follows:

True:  {{toString booleanTestTrue}}
False: {{toString booleanTestFalse}}

In most scenarios you could get away with simply return x.toString(). The extra checking avoids attempting to call toString on undefined values.