30

空白を細かく制御したいが、読みやすいテンプレートが残っている。

単純なユースケースによる他の解決策かどうかを確認したかっただけです。

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

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

https://github.com/wycats/handlebars.js/issues/479 - クローズされたチケットを送信しました。

4

5 に答える 5

2

これの最もクリーンな実装は、{{"\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~}}

于 2020-05-23T14:21:52.423 に答える
1

ハンドルバーヘルパーをtrim()空白に追加できます

{{#-}}

Surrounding whitespace would be removed.

{{/-}}

背景情報: https://github.com/wycats/handlebars.js/pull/336

于 2014-03-03T07:27:55.900 に答える