handlerbars.jsリストが空かどうかを確認します


122

Handlebars.jsテンプレートで、リストまたはコレクションを繰り返し処理する前に、コレクションまたはリストがnullまたは空かどうかを確認する方法はありますか?

// if list is empty do some rendering ... otherwise do the normal
{{#list items}}

{{/list}}



{{#each items}}

{{/each}}

回答:


209

「各」タグは「else」セクションも取ることができます。したがって、最も単純な形式は次のとおりです。

{{#each items}}
// render item
{{else}}
// render empty
{{/each}}

それはクールですが、質問には答えません。タグ(内部にsがある)の#eachようにタグをラップする場合、空の状態をでラップする必要はありません。<ul><li><ul>
Leonardo Raele、

236

あなたが表示することを何かを持っている場合は、一度配列にデータがある場合にのみ、使用することを

{{#if items.length}}
    //Render
{{/if}}

.length 空の配列の場合は0を返すため、実際の偽の値が得られます。


1
どちらの答えも正しく機能しており、質問に答えます。これは、配列にデータがないときに何かを表示する方法でした。その逆ではありません。
Drejc 14

15
いいえ、同意しません。これが正解です。forループは含まれていません。
radtek、2014年

4
単純なケース:<ul>タグを1回レンダリング<li>し、リスト内の各項目のタグをレンダリングしたい。リストが空の場合、私は<ul>をレンダリングしたく<p>empty list<p>あり<ul>ません。また、の内部のような何かをレンダリングしても意味がありません。
Fuad Saud

2
この回答は実装固有です。ハンドルバーのドキュメントは、その指定した[]偽として評価されます。@Drejcによる答えは、ハンドルバー仕様による正しい答えです。
Stim

1
registerHelperよりもはるかに優れたソリューションです。
デンマーク語

38

OK、思ったより簡単です。

{{#if items}}
// render items

{{#each items}}
// render item
{{/each}}

{{else}}
// render empty
{{/if}}

5
itemsが空の配列の場合(つまり、の値を持つ場合[])、真の値が生成されます。一方items.length、空の配列に対して誤った値を生成します。@Duaneの回答を参照してください。
gfullam

ええと...それから3年が経過しました...実装が変更されたか、単純に[]配列のケースがなかった可能性があります。私が覚えている限り、それは私のために働いた。
Drejc

12
あなたが正しい。私は先制のネイティブJSの行動に基づいてコメントしifますが、ハンドルバーのドキュメントは非常に明確である: 『その引数の戻りが場合はfalseundefinednull""0、または[]、ハンドルバーは、ブロックをレンダリングしません。』最初にドキュメントを確認する必要がありました。
gfullam 2015

8

コレクション(カーソル)が空かどうかを確認する場合は、前の回答は役に立たないため、代わりに次のcount()メソッドを使用する必要があります。

{{#if items.count}}
    <p>There is {{items.count}} item(s).</p>
{{else}}
    <p>There is nothing</p>
{{/if}}

2
@BasicWolfしない、countがカーソルで機能する、代わりに配列で長さを使用する場合。
Karl.S

これは、配列とオブジェクトをチェックし、それらを異なる方法で処理するのに最適です。
Ryan Walton

2

{{#if}}の上に{{#each}}を使用する必要がある人(つまり、forループ内のifループ)。彼らは3つの異なる配列のリストを持っていますか?

ifステートメント内でルックアップを使用すると、問題が解決します。上記の回答で問題が解決しなかったためです。

これが私のコードです、

{{#each OtherRandomItems}}

  {{this}}

  {{lookup ../AnotherRandomItems @index}}

  {{#if (lookup ../RandomItems @index)}}
  // render items
  {{else}}
  // render empty
  {{/if}}

{{/each}}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.