handlerbars.js sprawdź, czy lista jest pusta


122

Czy w pliku Handlebars.js istnieje sposób sprawdzania, czy kolekcja lub lista jest pusta, czy też jest pusta, przed przejściem i iteracją po liście / kolekcji?

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

{{/list}}



{{#each items}}

{{/each}}

Odpowiedzi:


209

Tag „each” może również zajmować sekcję „else”. Więc najprostsza forma to:

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

1
To fajne, ale nie odpowiada na pytanie. Jeśli chcesz, aby tag był zawijany #each, taki jak <ul>tag (ze <li>s w środku), nie chcesz, aby pusty stan był zawijany przez <ul>.
Leonardo Raele

236

Jeśli masz coś, co chcesz wyświetlić raz i tylko wtedy, gdy tablica zawiera dane , użyj

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

.length zwróci 0 dla pustych tablic, więc osiągnęliśmy prawdziwą wartość błędu.


1
Obie odpowiedzi są poprawne i działają, i odpowiadają na pytanie. Jak wyświetlić coś, gdy w tablicy nie ma danych. Nie na odwrót.
Drejc,

15
Nie, zgadzam się, to jest poprawna odpowiedź. Nie zawiera pętli for.
radtek

4
Prosty przypadek: chcę <ul>raz wyrenderować tag i <li>tag dla każdej pozycji na liście. Jeśli lista jest pusta, nie chcę nawet <ul>renderować, a renderowanie czegoś innego, takiego jak <p>empty list<p>wewnątrz <ul>, nie ma sensu.
Fuad Saud

2
Ta odpowiedź jest specyficzna dla implementacji. Dokumentacja kierownicy określa, że []jest oceniany jako fałszywy. Odpowiedź @Drejc to poprawna odpowiedź według specyfikacji kierownicy.
Stim

1
dziękuję koleś, to lepsze rozwiązanie niż registerHelper.
Duński

38

Ok, to prostsze niż myślałem:

{{#if items}}
// render items

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

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

5
Jeśli itemsjest to pusta tablica (tj. Ma wartość []), zwróci prawdziwą wartość. Natomiast items.lengthdaje wartość błędną dla pustej tablicy. Zobacz odpowiedź @ Duane .
gfullam

Huh ... 3 lata minęły od ... może być tak, że implementacja się zmieniła lub po prostu nie miałem przypadku tablicy []. O ile pamiętam, to zadziałało.
Drejc

13
Masz rację. I zapobiegawczo skomentował na podstawie zachowania rodzimej JS” if, ale dokumentacja Kierownice jest bardzo jasne:«Jeśli jego powroty argumentów false, undefined, null, "", 0, lub [], Kierownice nie czynią blok». Powinienem najpierw sprawdzić dokumentację.
gfullam

8

Jeśli chcesz sprawdzić, czy kolekcja (kursor) jest pusta, czy nie, poprzednie odpowiedzi nie będą przydatne, zamiast tego musisz użyć count()metody:

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

2
@BasicWolf nie, count działa z kursorem, jeśli zamiast tego masz tablicę, użyj długości.
Karl.S

Świetnie sprawdza się to w przypadku sprawdzania między tablicą a obiektem oraz do obsługi ich w inny sposób.
Ryan Walton

2

Dla każdego, kto musi użyć {{#each}} nad {{#if}} (tj. Pętla if wewnątrz pętli for). Czy mają trzy różne listy tablic.

Korzystanie z wyszukiwania w instrukcji if rozwiązuje problem. Ponieważ powyższe odpowiedzi nie rozwiązały mojego problemu.

Oto mój kod,

{{#each OtherRandomItems}}

  {{this}}

  {{lookup ../AnotherRandomItems @index}}

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

{{/each}}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.