Handlebars template - "tilde" in if statement

Question

We have statement like:

{{~#if someCondition ~}} 
<div class="whyweneedtildehere"></div> 
{{~/if~}}

What is the difference between simple if statement and if statement with "~" in handlebars templates?

score 30 · Accepted Answer · edited Sep 21 '20 at 09:57

30

It is called a tilde, which might help you google it further.

The Handlebars docs answers your question in detail.

Template whitespace may be omitted from either side of any mustache statement by adding a ~ character by the braces. When applied all whitespace on that side will be removed up to the first handlebars expression or non-whitespace character on that side.

edited Sep 21 '20 at 09:57

trygub

87
8

answered Sep 26 '14 at 10:48

Hein Haraldson Berg

1,108
11
24

1

Thanks for clarification, but it's not an answer to my question. – vvahans Sep 26 '14 at 10:58
Did you check how your Handlebars is configured in your project, specifically? Did you grep for occurences of `{{~` and `~}}` other places than in your templates? – Hein Haraldson Berg Sep 26 '14 at 11:10
Upon further investigation, I found that it has to do with controlling whitespace. I’ve edited my answer above. – Hein Haraldson Berg Sep 26 '14 at 11:18
2

https://handlebarsjs.com/guide/expressions.html#whitespace-control is the current link as of 2019. – wegry Dec 13 '19 at 16:38

score 12 · Answer 2 · edited Oct 31 '18 at 08:59

Here are some examples that might help you understand what ~ does.

In .js:

{
  hello: 'Hello, World!',
}

Example #1:

.hbs

<div>
  {{hello}}
</div>

.html

<div>
  Hello, World!
</div>

Example #2:

.hbs

<div>
  {{~hello}}
</div>

.html

<div>Hello, World!
</div>

Example #3:

.hbs

<div>
  {{~hello~}}
</div>

.html

<div>Hello, World!</div>

Basically, it's for removing whitespaces in the output HTML.

Handlebars template - "tilde" in if statement

2 Answers2