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

Respostas:

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