我想要对空白进行精细控制,但仍然有可读的模板。
只是想通过简单的用例看看其他人的解决方案。
{{name}}
{{#if age}}
, {{age}}
{{/if}}
# outputs {{name}} , {{age}}
# desire: {{name}}, {{age}}
https://github.com/wycats/handlebars.js/issues/479 - 提交了一张已关闭的票。
我想要对空白进行精细控制,但仍然有可读的模板。
只是想通过简单的用例看看其他人的解决方案。
{{name}}
{{#if age}}
, {{age}}
{{/if}}
# outputs {{name}} , {{age}}
# desire: {{name}}, {{age}}
https://github.com/wycats/handlebars.js/issues/479 - 提交了一张已关闭的票。
根据拉取请求的历史添加此功能,看起来这是正确的语法:
<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>
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}}
我认为最干净的实现是{{"\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~}}
您可以将 Handlebars Helper 添加到trim()
空白处
{{#-}}
Surrounding whitespace would be removed.
{{/-}}