编辑

Question

我想要精确控制空白，但仍然有可读的模板。

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

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

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

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

Answer 1

根据the pull request to add this feature的历史记录，看起来这是正确的语法：

<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

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

{{#-}}

Surrounding whitespace would be removed.

{{/-}}

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

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

车把的空白控件文档可以在这里找到：http://handlebarsjs.com/expressions.html#whitespace-control

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

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

案例1：

dict_results = {"ID_outer_loop":[], "ID_inner_loop":[]}
for key, value in df.iterrows():
    for key2, value2 in df.iterrows():
        if value["Min_time"] > value2["Min_time"]:
            if value["Min_time"] < value2["Max_time"]:
                if value["Date"] == value2["Date"]:
                    if value["Status"] != value2["Status"]:
                        dict_results["ID_outer_loop"].append(value["ID"])
                        dict_results["ID_inner_loop"].append(value2["ID"])

案例2：

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

把手，空白控制

5 个答案:

编辑