Handlebars conditional checked property from Jade template

Question

I'd like my handlebars template that's served to the client to look like

<input type='checkbox' checked={{isChecked}}>

or

<input type='checkbox' {{#if isChecked}}checked{{/if}}>

How can I write a Jade template that will compile to this? from their docs, the checked property will be included if the assigned value is truthy but not actually include the value:

input(type="checkbox", checked="{{isChecked}}")

compiles to

<input type='checkbox' checked>

I've also tried:

input(type="checkbox", checked={{isChecked}})

and

input(type="checkbox", {{#if isChecked}}checked{{/if}})

that just fails to compile, which I understand

Answer 1

well try it directly in your jade template.

<input type='checkbox' {{#if isChecked}}checked{{/if}}>

should stay in the same format.

Answer 2

I would suggest creating a more general helper that you can later reuse easily

Handlebars.registerHelper("checkedIf", function (condition) {
    return (condition) ? "checked" : "";
});

Then, you can use it in any of your templates:

<script id="some-template" type="text/x-handlebars-template">
   ...
   <input type="checkbox" {{checkedIf this.someField}} />
   ...
</script>

This will be rendered as

<input type="checkbox" checked />

 or...

<input type="checkbox" />

depending on the value of someField (a field of the object being mapped to the template)