handlerbars.js verifica se a lista está vazia

122

Existe uma maneira no Handlebars.js de modelo para verificar se a coleção ou lista é nula ou vazia, antes de ir e iterar pela lista / coleção?

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

{{/list}}



{{#each items}}

{{/each}}

handlebars.js

— Drejc
fonte

209

A tag "each" também pode ter uma seção "else". Portanto, a forma mais simples é:

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

— Emre Efendi
fonte

Isso é legal, mas não responde à pergunta. Se você deseja que uma tag seja quebrada #each, como uma <ul>tag (com <li>s dentro), não deseja que o estado vazio seja quebrado pelo <ul>.

— Leonardo Raele 15/07/19

236

Se você tiver algo que deseja exibir uma vez e somente se a matriz tiver dados , use

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

.length retornará 0 para matrizes vazias, portanto, atingimos um valor real de falsey.

— Duane
fonte

1

Ambas as respostas estão corretas e funcionam, e respondem à pergunta. Qual era como exibir algo quando não há dados na matriz. Não o contrário.

— Drejc

15

Não, eu concordo, esta é a resposta correta. Não inclui um loop for.

— Radtek 18/10/2014

4

Caso simples: desejo renderizar uma <ul>tag uma vez e uma <li>tag para cada item da lista. Se a lista estiver vazia, eu nem quero que o <ul>renderize, e renderizar algo como <p>empty list<p>dentro <ul>dele não faz sentido.

— Fuad Saud

2

Esta resposta é específica da implementação. Os documentos do guidão especificam que []é avaliado como falso. A resposta do @Drejc é a resposta correta pela especificação do guidão.

— Stim

1

obrigado cara, que é a solução muito melhor do que registerHelper.

— Dinamarquês

38

Ok, é mais simples do que eu pensava:

{{#if items}}
// render items

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

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

— Drejc
fonte

5

Se itemsfor uma matriz vazia (ou seja, tem um valor de []), ela produzirá um valor verdadeiro. Considerando que items.lengthproduz um valor de falsey para uma matriz vazia. Veja a resposta de @ Duane .

— Gfullam

Huh ... 3 anos se passaram desde ... pode ser que a implementação tenha mudado ou que eu simplesmente não tenha tido nenhum caso de [] array. Tanto quanto me lembro, funcionou para mim.

— Drejc

12

Você está certo. I preventivamente comentou com base no comportamento de JS nativo' if, mas a documentação Handlebars é muito clara: 'Se seu argumento retornos false, undefined, null, "", 0, ou [], guidão não vai tornar o bloco.' Eu deveria ter verificado os documentos primeiro.

— gfullam

8

Se você deseja verificar se uma coleção (cursor) está vazia ou não, as respostas anteriores não serão úteis. Em vez disso, você deve usar o count()método:

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

— Karl.S
fonte

2

@BasicWolf não, count funciona com o cursor, se você tiver um array, use length.

— Karl.S

Isso funciona muito bem para verificar entre uma matriz e um objeto e lidar com eles de maneira diferente.

— 22680 Ryan Walton #

2

Para quem precisa usar um {{#each}} em cima de {{#if}} (ou seja, um loop if dentro de um loop for). Eles têm três listas diferentes de matrizes.

Usar uma pesquisa dentro de uma instrução if resolve o problema para mim. Como, as respostas acima não resolveram meu problema.

Aqui está o meu código,

{{#each OtherRandomItems}}

  {{this}}

  {{lookup ../AnotherRandomItems @index}}

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

{{/each}}

— Akarsh SEGGEMU
fonte