Handlebars doesn't render boolean variables when false

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?

Aaks20

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

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

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

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.

I used this, similar to Barney's answer but supports null too.

Handlebars.registerHelper('toString', function (v) { 
    return '' + v; 
});

You would then invoke it as follows:

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

However if v is an object with a pretty toString method you need to do more coding.

来源：https://stackoverflow.com/questions/17664323/handlebars-doesnt-render-boolean-variables-when-false

标签