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?

Haya

Answer 1

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.

Supposititious

Thanks for clarification, but it's not an answer to my question. – Haya

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? – Supposititious

Upon further investigation, I found that it has to do with controlling whitespace. I’ve edited my answer above. – Supposititious

handlebarsjs.com/guide/expressions.html#whitespace-control is the current link as of 2019. – Goatskin

Answer 2

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.

Germicide