handlerbars.js prüft, ob die Liste leer ist

122

Gibt es eine Möglichkeit in Handlebars.js Vorlagen, um zu überprüfen, ob die Sammlung oder Liste null oder leer ist, bevor die Liste / Sammlung durchlaufen wird?

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

{{/list}}



{{#each items}}

{{/each}}

handlebars.js

— Drejc
quelle

209

Das "each" -Tag kann auch einen "else" -Abschnitt enthalten. Die einfachste Form ist also:

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

— Emre Efendi
quelle

Das ist cool, beantwortet aber die Frage nicht. Wenn Sie möchten, dass ein Tag #eachwie ein <ul>Tag (mit <li>s im Inneren) umbrochen wird, möchten Sie nicht, dass der leere Status durch das umbrochen wird <ul>.

— Leonardo Raele

236

Wenn Sie etwas haben, das Sie einmal und nur anzeigen möchten, wenn das Array Daten enthält , verwenden Sie

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

.length gibt 0 für leere Arrays zurück, sodass wir einen echten Falsey-Wert erreicht haben.

— Duane
quelle

1

Beide Antworten sind richtig und funktionieren und beantworten die Frage. So wurde etwas angezeigt, wenn das Array keine Daten enthält. Nicht umgekehrt.

— Drejc

15

Nein, ich stimme zu, das ist die richtige Antwort. Es enthält keine for-Schleife.

— Radtek

4

Einfacher Fall: Ich möchte ein <ul>Tag einmal und ein <li>Tag für jedes Element in der Liste rendern . Wenn die Liste leer ist, möchte ich nicht einmal, dass die <ul>gerendert wird, und etwas anderes wie <p>empty list<p>in der zu rendern <ul>macht keinen Sinn.

— Fuad Saud

2

Diese Antwort ist implementierungsspezifisch. In den Lenkerdokumenten wird angegeben, dass dies []als falsch bewertet wird. Die Antwort von @Drejc ist die richtige Antwort gemäß Lenkerspezifikation.

— Stim

1

Danke Alter, das ist eine viel bessere Lösung als registerHelper.

— Dänisch

38

Ok, es ist einfacher als ich dachte:

{{#if items}}
// render items

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

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

— Drejc
quelle

5

Wenn itemses sich um ein leeres Array handelt (dh einen Wert von hat []), wird ein wahrheitsgemäßer Wert erzeugt. Wohingegen items.lengtherzeugt einen Falsey Wert für eine leere Arrays. Siehe @ Duanes Antwort .

— Gfullam

Huh ... 3 Jahre sind vergangen ... es könnte sein, dass sich die Implementierung geändert hat oder dass ich einfach keinen Fall von [] Array hatte. Soweit ich mich erinnere, hat es bei mir funktioniert.

— Drejc

12

Du hast recht. Ich präventiv kommentierte basierend auf dem Verhalten von nativem JS‘ if, aber der Lenker Dokumentation ist sehr klar:‚Wenn ihr Argument zurückkehrt false, undefined, null, "", 0, oder [], Lenker nicht um den Block machen.‘ Ich hätte zuerst die Dokumente überprüfen sollen.

— Gfullam

8

Wenn Sie überprüfen möchten, ob eine Sammlung (Cursor) leer ist oder nicht, sind die vorherigen Antworten nicht hilfreich. Stattdessen müssen Sie die folgende count()Methode verwenden:

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

— Karl.S
quelle

2

@BasicWolf funktioniert nicht, count funktioniert mit dem Cursor, wenn Sie stattdessen die Länge des Arrays verwenden.

— Karl.S

Dies funktioniert hervorragend, um zwischen einem Array und einem Objekt zu prüfen und sie unterschiedlich zu behandeln.

— Ryan Walton

2

Für alle, die ein {{#each}} über {{#if}} verwenden müssen (dh eine if-Schleife innerhalb einer for-Schleife). Haben sie drei verschiedene Liste von Arrays.

Die Verwendung einer Suche in einer if-Anweisung löst das Problem für mich. Da die obigen Antworten mein Problem nicht gelöst haben.

Hier ist mein Code,

{{#each OtherRandomItems}}

  {{this}}

  {{lookup ../AnotherRandomItems @index}}

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

{{/each}}

— Akarsh SEGGEMU
quelle