【问题标题】：How to remove newlines generated by Handlebars?如何删除 Handlebars 生成的换行符？
【发布时间】：2014-02-11 21:18:47
【问题描述】：

假设我有一个如下模板：

start
{{#if data}}
data
{{/if}}
end

无论我传递给模板什么，它都会有两个额外的换行符：

start

data

end

有没有办法让 Handlebars 不生成标签占用的换行符（不移动标签本身）？例如。

start
data
end

我想要这个的原因是因为在某些情况下（比如在 XML 中），换行是不可取的。

例如：

<parent>
    {{#each}}
        <child>{{.}}</child>
    {{/each}}
</parent>

会生成

<parent>

    <child>foo</child>

    <child>bar</child>

</parent>

将 {{#each}}、{{/each}} 折叠成一行会导致 Handlebars 也在一行上生成列表。例如，这个：

 <parent>
     {{#each}}<child>{{.}}</child>{{/each}}
 </parent>

会生成

 <parent>
     <child>foo</child><child>bar</child>    
 </parent>

所以为了生成没有多余换行符的 XML，我的模板最终看起来像这样：

 <parent>{{#each}}
     <child>{{.}}{{/each}}
 </parent>

谢谢！

【问题讨论】：

您是否找到了不涉及以不同编码保存文档的解决方案？
@MarkLopez 是的，你可以试试这个：handlebarsjs.com/block_helpers.html#whitespace-control
具有讽刺意味的是，我找到了解决问题的另一种方法。我的 IDE 使用 Windows 系统上常见的第二个换行符保存文件。手柄条没有正确删除字符。
How do you prevent newline added to Handlebars partial?的可能重复

标签： handlebars.js

【解决方案1】：

见this question。尝试在括号中添加 swing dash，例如，{{> partial ~}} 而不是 {{> partial}}，这将删除换行符。在您的情况下，它将是：

start
{{#if data ~}}
data
{{/if ~}}
end

编译成：

start 
data 
end

【讨论】：

【解决方案2】：

对于那些试图删除所有后续尾随行的人，我认为最干净的实现是将{{"\n"~}} 添加到任何相关行的末尾。

"\n" 在技术上可以是除了空的任何东西，即""。我使用"\n" 来明确我在编辑器中所做的工作。

示例

start{{"\n"~}}
data
end

结果

startdata
end

示例

start{{"\n"~}}



data
end

结果

startdata
end

示例

start{{"\n"~}}


data{{"\n"~}}


end

结果

startdataend

编辑

或者：

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~}}

【讨论】：

【解决方案3】：

here 给出的答案不适用于我使用 express-handlebars 3.0.0。起作用的是细微的变化：

{{~#each children~}}
  {{this}}
{{~/each~}}

我在一个相关问题的答案中找到了这个解决方案：

https://stackoverflow.com/a/23636497/54426

【讨论】：