handlerbars.js vérifie si la liste est vide

122

Existe-t-il un moyen dans le modèle Handlebars.js de vérifier si la collection ou la liste est nulle ou vide, avant de parcourir la liste / collection?

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

{{/list}}



{{#each items}}

{{/each}}

handlebars.js

— Drejc
source

209

La balise «each» peut également prendre une section «else». La forme la plus simple est donc:

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

— Emre Efendi
source

1

C'est cool, mais ne répond pas à la question. Si vous voulez qu'une balise soit enveloppée #each, comme une <ul>balise (avec <li>s à l'intérieur), vous ne voulez pas que l'état vide soit enveloppé par le <ul>.

— Leonardo Raele

236

Si vous avez quelque chose que vous souhaitez afficher une fois et seulement si le tableau contient des données , utilisez

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

.length renverra 0 pour les tableaux vides donc nous avons atteint une vraie valeur falsey.

— Duane
source

1

Les deux réponses sont correctes et fonctionnent, et elles répondent à la question. C'était comment afficher quelque chose quand il n'y a pas de données dans le tableau. Pas l'inverse.

— Drejc

15

Non je suis d'accord, c'est la bonne réponse. Il n'inclut pas de boucle for.

— radtek

4

Cas simple: je veux rendre une <ul>balise une fois et une <li>balise pour chaque élément de la liste. Si la liste est vide, je ne veux même pas que le <ul>rendu soit, et rendre quelque chose d'autre comme <p>empty list<p>à l'intérieur de <ul>n'a pas de sens.

— Fuad Saud

2

Cette réponse est spécifique à la mise en œuvre. La documentation sur les guidons spécifie que []est évalué comme faux. La réponse de @Drejc est la bonne réponse par spécification du guidon.

— Stim

1

merci mec qui est bien meilleure solution que registerHelper.

— danois

38

Ok c'est plus simple que je ne le pensais:

{{#if items}}
// render items

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

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

— Drejc
source

5

Si itemsest un tableau vide (c'est-à-dire a une valeur de []), il produira une valeur de vérité. Considérant que items.lengthproduit une valeur falsey pour un tableau vide. Voir la réponse de @ Duane .

— gfullam

Huh ... 3 ans ont passé depuis ... il se peut que l'implémentation ait changé ou que je n'ai simplement pas eu de cas de [] array. Autant que je me souvienne, cela a fonctionné pour moi.

— Drejc

12

Vous avez raison. Je commentais préventivement en fonction du comportement de JS natif » if, mais la documentation Guidons est très claire: « Si ses déclarations d'argument false, undefined, null, "", 0ou [], guidons ne rendra pas le bloc. » J'aurais dû d'abord vérifier les documents.

— gfullam du

8

Si vous voulez vérifier si une collection (curseur) est vide ou non, les réponses précédentes ne seront pas utiles, à la place vous devez utiliser la count()méthode:

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

— Karl.S
source

2

@BasicWolf ce n'est pas le cas, count fonctionne avec le curseur, si vous avez un tableau, utilisez la longueur à la place.

— Karl.S

Cela fonctionne très bien pour vérifier entre un tableau et un objet, et pour les gérer différemment.

— Ryan Walton

2

Pour tous ceux qui ont besoin d'utiliser un {{#each}} au-dessus de {{#if}} (c'est-à-dire une boucle if dans une boucle for). Est-ce qu'ils ont trois listes différentes de tableaux.

Utiliser une recherche dans une instruction if résout le problème pour moi. Comme, les réponses ci-dessus n'ont pas résolu mon problème.

Voici mon code,

{{#each OtherRandomItems}}

  {{this}}

  {{lookup ../AnotherRandomItems @index}}

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

{{/each}}

— Akarsh SEGGEMU
source