# 組み込みヘルパー

# #if

ifヘルパーを使用すると、ブロックを条件付きでレンダリングできます。引数がfalseundefinednull""0、または[]を返す場合、Handlebarsはブロックをレンダリングしません。

テンプレート (プレイグラウンドアイコン)
<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{/if}}
</div>

上記のテンプレートに以下の入力を渡すと

入力 (プレイグラウンドアイコン)
{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz",
}

以下のような結果が生成されます

出力 (プレイグラウンドアイコン)
<div class="entry">
<h1>Yehuda Katz</h1>
</div>

入力が空のJSONObject {}の場合、authorundefinedになり、if条件は失敗し、以下のような出力が生成されます

<div class="entry"></div>

ブロック式を使用する場合、式が偽の値を返した場合に実行されるテンプレートセクションを指定できます。 elseでマークされたセクションは、「elseセクション」と呼ばれます。

テンプレート (プレイグラウンドアイコン)
<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{else}}
<h1>Unknown Author</h1>
{{/if}}
</div>

# includeZero

includeZero=trueオプションを設定すると、条件が空でないものとして扱われます。これは事実上、0が正のパスまたは負のパスによって処理されるかどうかを決定します。

{{#if 0 includeZero=true}}
<h1>Does render</h1>
{{/if}}

# サブ式

ヘルパーは、テンプレートにカスタムロジックを追加するための提案された方法です。任意のヘルパーを作成し、サブ式で使用できます。

たとえば、変数の初期化をチェックする場合、組み込みの#ifチェックは、空のコレクションに対してfalseを返すため、適切でない場合があります(Utils.isEmptyを参照)。

以下のように「undefined」をチェックするヘルパーを作成できます

準備スクリプト (プレイグラウンドアイコン)
Handlebars.registerHelper('isdefined', function (value) {
  return value !== undefined;
});

次に、ヘルパーをサブ式として使用します

テンプレート (プレイグラウンドアイコン)
{{#if (isdefined value1)}}true{{else}}false{{/if}}
{{#if (isdefined value2)}}true{{else}}false{{/if}}

# #unless

unlessヘルパーは、ifヘルパーの逆として使用できます。式が偽の値を返した場合、そのブロックがレンダリングされます。

テンプレート
<div class="entry">
{{#unless license}}
<h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
</div>

現在のコンテキストで`license`をルックアップした結果が偽値の場合、Handlebarsは警告を表示します。それ以外の場合は、何も表示しません。

# #each

組み込みの`each`ヘルパーを使用して、リストを反復処理できます。ブロック内では、`this`を使用して、反復処理されている要素を参照できます。

テンプレート ...
<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

このコンテキストで使用すると

入力 ...
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}

結果は次のようになります

出力 ...
<ul class="people_list">
    <li>Yehuda Katz</li>
    <li>Alan Johnson</li>
    <li>Charles Jolley</li>
</ul>

現在のコンテキストを参照するには、任意のコンテキストで`this`式を使用できます。

リストが空の場合にのみ表示される`else`セクションをオプションで指定できます。

テンプレート ...
{{#each paragraphs}}
<p>{{this}}</p>
{{else}}
<p class="empty">No content</p>
{{/each}}

`each`でアイテムをループ処理する場合、オプションで`{{@index}}`を使用して現在のループインデックスを参照できます。

{{#each array}} {{@index}}: {{this}} {{/each}}

さらに、オブジェクトの反復処理では、`{{@key}}`は現在のキー名を参照します。

{{#each object}} {{@key}}: {{this}} {{/each}}

配列を反復処理する場合、反復処理の最初と最後のステップは、`@first`および`@last`変数によって示されます。

ネストされた`each`ブロックは、深さベースのパスを介して反復変数にアクセスできます。たとえば、親インデックスにアクセスするには、`{{@../index}}`を使用できます。

# #with

`with`ヘルパーを使用すると、テンプレート部分の評価コンテキストを変更できます。

テンプレート ...
{{#with person}}
{{firstname}} {{lastname}}
{{/with}}

このコンテキストで使用すると

入力 ...
{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

結果は次のようになります

出力
Yehuda Katz

`with` は、ブロックパラメータと共に使用して、現在のブロック内で既知の参照を定義することもできます。上記の例は、以下のように変換できます。

テンプレート ...(省略)...>
{{#with city as | city |}}
  {{#with city.location as | loc |}}
    {{city.name}}: {{loc.north}} {{loc.east}}
  {{/with}}
{{/with}}

これにより、複雑なテンプレートで `../` を使った階層的な参照よりも明確なコードを提供できる可能性があります。

渡された値が空の場合にのみ表示される `{{else}}` セクションをオプションで指定できます。

テンプレート ...(省略)...>
{{#with city}}
{{city.name}} (not shown because there is no city)
{{else}}
No city found
{{/with}}
入力 ...(省略)...>
{
  person: {
    firstname: "Yehuda",
    lastname: "Katz",
  },
}

# ルックアップ

`lookup` ヘルパーを使用すると、Handlebars 変数を使用して動的にパラメータを解決できます。

これは、配列のインデックスの値を解決する場合に便利です。

テンプレート ...(省略)...>
{{#each people}}
   {{.}} lives in {{lookup ../cities @index}}
{{/each}}

また、入力データに基づいてオブジェクトのプロパティをルックアップするためにも使用できます。以下は、`lookup` を部分式で使用して、プロパティ値に基づいて評価コンテキストを別のオブジェクトに変更する、より複雑な例です。

テンプレート ...(省略)...>
{{#each persons as | person |}}
    {{name}} lives in {{#with (lookup ../cities [resident-in])~}}
      {{name}} ({{country}})
    {{/with}}
{{/each}}

# ログ

`log` ヘルパーを使用すると、テンプレートの実行中にコンテキストの状態をログに記録できます。

テンプレート ...(省略)...>
{{log 'this is a simple log output'}}

これは、カスタムログを実行するためにオーバーライドできる `Handlebars.logger.log` に委任されます。

このメソッドには任意の数の引数を渡すことができ、すべてロガーに転送されます。

テンプレート ...(省略)...>
{{log 'firstname' firstname 'lastname' lastname}}

ログレベルは、レベルハッシュパラメータを使用して設定できます。サポートされている値は、debug、info、warn、および error です。省略した場合、デフォルト値は info です。

ロギングは、レベルと `Handlebars.logger.level` に設定された値(デフォルトは `info`)に基づいて条件付きで実行されます。現在のレベル以上のすべてのログステートメントが出力されます。

テンプレート
{{log "debug logging" level="debug"}}
{{log "info logging" level="info"}}
{{log "info logging is the default"}}
{{log "logging a warning" level="warn"}}
{{log "logging an error" level="error"}}
最終更新日: 2021年12月21日 午後7時58分22秒