web-dev-qa-db-ja.com

ハンドルバー、空白制御

空白を細かく制御したいのですが、読みやすいテンプレートがあります。

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

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

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

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

whitespacehandlebars.jsspacecomma
24
Quang Van

からの履歴に従って、この機能を追加するプルリクエスト は、これが正しい構文のように見えます：

<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>
42
Brian

Brian answer へのコメントだけで、空白を削除し、同時にハンドルバーで式をエスケープしたくない場合、使用する正しい構文は次のとおりです。

{{~{EXPRESSION}~}}

（エスケープせずに式の前後の空白を削除する）

4
Stefan

ハンドルバーヘルパーをtrim()ホワイトスペースに追加できます

{{#-}}

Surrounding whitespace would be removed.

{{/-}}

背景情報の詳細： https://github.com/wycats/handlebars.js/pull/336

2
Quang Van

ハンドルバーのホワイトスペースコントロールのドキュメントは、次の場所にあります。 http://handlebarsjs.com/expressions.html#whitespace-control

テンプレートの空白は、中かっこで〜文字を追加することにより、口ひげ文のどちらの側からも省略できます。適用されると、その側のすべての空白は、その側の最初のハンドルバー式または非空白文字まで削除されます。

これらの2つのコンマリストの例は、同じ出力になります。

ケース1：

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

ケース2：

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