whitespace - 车把，空白控制

Question

我想要对空白进行精细控制，但仍然有可读的模板。

只是想通过简单的用例看看其他人的解决方案。

{{name}}
{{#if age}}
  , {{age}}
{{/if}}

# outputs {{name}} , {{age}}
# desire: {{name}}, {{age}}

https://github.com/wycats/handlebars.js/issues/479 - 提交了一张已关闭的票。

Answer 1

根据拉取请求的历史添加此功能，看起来这是正确的语法：

<h4>
{{~#object~}}

Surrounding whitespace would be removed.

{{/object}}
</h4>

结果：

<h4>Surrounding whitespace would be removed.</h4>

还有这种语法只修剪前导空格：

<h4>
{{~#object}}

Only leading whitespace would be removed.

{{/object}}
</h4>

结果：

<h4>Only leading whitespace would be removed.
</h4>

Answer 2

只是对Brian answer的评论，如果您想修剪空格并且不希望车把同时转义您的表达式，则要使用的正确语法是：

{{~{EXPRESSION}~}}

（修剪表达式前后的空格，而不是转义它）

Answer 3

Handlebar 的空白控制文档可以在这里找到： https ://handlebarsjs.com/guide/expressions.html#whitespace-control

通过在大括号中添加 ~ 字符，可以从任何 mustache 语句的任一侧省略模板空格。应用时，该侧的所有空白将被删除，直到该侧的第一个车把表达式或非空白字符。

这两个逗号列表示例将具有相同的输出：

情况1：

  {{#each listItems as |item index|}}
    {{#if (eq index 0)}}
      {{~item.name~}}
    {{else~}}
      , {{item.name~}}
    {{/if}}
  {{/each}}

案例二：

  {{#each listItems as |item index|}}
    {{#if (eq index 0)~}}
      {{item.name}}
    {{~else~}}
      , {{item.name}}
    {{~/if}}
  {{/each}}

Answer 4

我认为最干净的实现是{{"\n"~}}在你想要在新线路上硬停的地方添加。

从"\n"技术上讲，除了空之外，它可以是任何东西，即"". 我曾经"\n"在编辑器中明确说明我在做什么。

例子

Three empty lines after this



{{"\n"~}}







Three empty lines before this


Two empty lines before this. No empty lines after this.


{{~"\n"~}}


No empty lines before this.

结果

Three empty lines after this



Three empty lines before this


Two empty lines before this. No empty lines after this.No empty lines before this.

基本上，正如其他人所说，任何帮助程序都可以使用前缀或后缀~。在这里，我决定传递一个不会作为助手 ( "\n") 呈现的值，它允许我们~自由地传递以控制空格之前和之后。

编辑

或者：

Handlebars.registerHelper(
  'singleLineOnly',
  function (options) { // "this" cannot be provided to inline function!
    return options.fn(this).replace(/[\r\n]+/gm, '')
  }
)
Handlebars.registerHelper(
  'singleSpaceOnly',
  function (options) { // "this" cannot be provided to inline function!
    return options.fn(this).replace(/\s\s+/g, ' ')
  }
)

这将允许您采取以下措施：

{{#each this}}
  {{#singleLineOnly}}
  {{#singleSpaceOnly}}

  {{calculatedAmount}}

  {{!an example comment}}
  {{#if unitOfMeasure.translate}}
    {{{unitOfMeasure.translate.value}}}
  {{/if}}

  {{!some random comment}}
  {{#unless unitOfMeasure.translate}}
    {{{unitOfMeasure.value}}}
  {{/unless}}

  {{!Some random comment}}
  {{#ifNotEquals (lowerCase product.value) "other"}}
    {{!If translated, use translated UOM}}
    {{#if product.translate}}
      {{{product.translate.value}}}
    {{/if}}
    {{!If not translated, use default UOM}}
    {{#unless product.translate}}
      {{{product.value}}}
    {{/unless}}
  {{/ifNotEquals}}

  {{!just some more logic for example}}

  {{#ifNotEquals (lowerCase ingredient.value) "other"}}
    {{!If translated, use translated UOM}}
    {{#if ingredient.translate}}
      {{{ingredient.translate.value}}}
    {{/if}}
    {{!If not translated, use default UOM}}
    {{#unless ingredient.translate}}
      {{{ingredient.value}}}
    {{/unless}}
  {{/ifNotEquals}}
  <br/>

  {{/singleSpaceOnly}}
  {{/singleLineOnly}}
{{/each}}

最后得到这个：

1/2 oz. first ingredient <br/>
1 pump(s) another ingredient <br/>
3/4 oz. this ingredient <br/>
2 shot(s) that ingredient <br/>
last instruction <br/>

{{#singleLineOnly}}并且{{#singleSpaceOnly}}可以用作任何文本的包装器。您很可能希望将这些~用于额外的前后空白控制。例如：{{~#singleLineOnly~}}

Answer 5

您可以将 Handlebars Helper 添加到trim()空白处

{{#-}}

Surrounding whitespace would be removed.

{{/-}}

更多背景信息：https ://github.com/wycats/handlebars.js/pull/336