How to use comments in Handlebar templates?

Question

I am using Handlebar.js as my templating engine. Now I want to comment out some of the blocks in my handlebar templates. But then I realized that Handlebar doesn't ignore the expressions inside the Handlebar comment block. Any workaround for this?

Solution 1

The newest version of Handlebars has block comments support :

{{!-- {{commented expressions}} --}}

https://github.com/wycats/handlebars.js/commit/a927a9b0adc39660f0794b9b210c9db2f7ddecd9

Solution 2

Just add an exclamation mark after the opening brackets.

Normal Expression:

{{expressions}}

Commented Expression:

{{!expressions}}

Solution 3

Use this way in your handlebar template file.

<div class="entry">
  {{!-- only output author name if an author exists --}}
  {{#if author}}
    <h1>{{author.firstName}} {{author.lastName}}</h1>
  {{/if}}
</div>

The comments will not be in the resulting output. If you'd like the comments to show up, then use HTML comments.

<div class="entry">
  {{! This comment will not be in the output }}
  <!-- This comment will be in the output -->
</div>

refer this link to

Solution 4

Two ways to comment on handlebar.js

single component:

{{!fixedTop=true}}     --> comments the whole content inside the brackets

Multiple component:

    {{!--fixedTop=true
          alignment=true--}}     --> comments the whole content until end with "--"

View more solutions

Comments

[Frédéric Hamidi]

This pull request might interest you.

[Abhidev]

It does support multiline comments but doesn't ignore the expressions inside it.

[isimmons]

Thanks jptsetung. It doesn't fully work as I expect a comment to but I guess it works for it's intended purpose. Going through this tutorial to see how handlebars works behind the scenes. net.tutsplus.com/tutorials/javascript-ajax/… . It seems handlebars doesn't fully ignore a commented line because it is still creating a token. The token is just empty. For example "{{!-- Hello {{name}} --}}" creates 1 empty token. Just thought it's worth mentioning if it ever causes issues for anyone. Don't know if it would since it's behind the scenes.

[Darren Cook]

Note that the difference between {{! and {{!-- forms is that only the latter allows embedded handlebars tags. As that will be easy to forget, especially in a long comment that is later revised, I would suggest to always use the longer comment form.

[AskMen]

@jptsetung, could you please help with this stackoverflow.com/questions/70820997/…