Handlebars模板 - if语句中的"tilde"

Question

我们有如下声明：

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

在handlebars模板中，简单的if语句和带有“~”的if语句有什么区别？

- vvahans

Answer 1

它被称为 ~ 波浪号，这可能会帮助您进一步搜索。

Handlebars文档详细回答了您的问题。

通过在大括号旁添加 ~ 字符，可以省略任何mustache语句两侧的模板空格。应用后，该侧的所有空格将被删除，直到该侧的第一个handlebars表达式或非空格字符为止。

- Hein Haraldson Berg

---

感谢您的澄清，但这并不是我问题的答案。 - vvahans

你检查了你的Handlebars在项目中的配置吗？特别是你是否在模板之外的其他地方grep了{{~和~}}的出现情况？ - Hein Haraldson Berg

经过进一步调查，我发现这与控制空格有关。我已经编辑了我的答案。 - Hein Haraldson Berg

截至2019年，https://handlebarsjs.com/guide/expressions.html#whitespace-control 是当前的链接。 - wegry

Answer 2

以下是一些例子，可能有助于您理解 ~ 的作用。

在 .js 中：

{
  hello: 'Hello, World!',
}

示例 #1：

.hbs

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

HTML

<div>
  Hello, World!
</div>

示例2：

.hbs

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

.HTML

<div>Hello, World!
</div>

示例 #3：

.hbs

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

.html

：这是一种常用于创建网页的文件格式，其中包含有关网页内容和结构的代码。

<div>Hello, World!</div>

这个功能主要是用来去除输出HTML中的空格。

- cglotr