handlerbars.js comprueba si la lista está vacía

122

¿Hay alguna forma en la plantilla de Handlebars.js para verificar si la colección o lista es nula o vacía, antes de ir e iterar a través de la lista / colección?

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

{{/list}}



{{#each items}}

{{/each}}

handlebars.js

— Drejc
fuente

209

La etiqueta "cada" puede tomar una sección "más" también. Entonces la forma más simple es:

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

— Emre Efendi
fuente

Eso es genial, pero no responde la pregunta. Si desea que una etiqueta se ajuste #each, como una <ul>etiqueta (con <li>s dentro), no desea que el estado vacío quede envuelto por <ul>.

— Leonardo Raele

236

Si tiene algo que desea mostrar una vez y solo si la matriz tiene datos , use

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

.length devolverá 0 para matrices vacías, por lo que hemos logrado un valor de falsey real.

— Duane
fuente

1

Ambas respuestas son correctas y funcionan, y responden la pregunta. Que era cómo mostrar algo cuando no hay datos en la matriz. No de la otra manera.

— Drejc

15

No, estoy de acuerdo, esta es la respuesta correcta. No incluye un bucle for.

— radtek

44

Caso simple: quiero representar una <ul>etiqueta una vez y una <li>etiqueta para cada elemento de la lista. Si la lista está vacía, ni siquiera quiero <ul>que se procese, y no tiene sentido representar algo más como <p>empty list<p>dentro <ul>.

— Fuad Saud

2

Esta respuesta es específica de implementación. Los documentos del manillar especifican que []se evalúa como falso. La respuesta de @Drejc es la respuesta correcta según la especificación del manillar.

— Stim

1

gracias amigo, esa es una solución mucho mejor que registerHelper.

— Danés

38

Ok, es más simple de lo que pensaba:

{{#if items}}
// render items

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

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

— Drejc
fuente

55

Si itemses una matriz vacía (es decir, tiene un valor de []), producirá un valor verdadero. Mientras que items.lengthproduce un valor falsey para una matriz vacía. Ver la respuesta de @ Duane .

— gfullam

Huh ... han pasado 3 años desde ... podría ser que la implementación ha cambiado o que simplemente no tuve ningún caso de [] array. Por lo que recuerdo, funcionó para mí.

— Drejc

12

Tienes razón. Me comento de forma preventiva basada en el comportamiento de JS nativa' if, pero la documentación manillares es muy clara: 'Si vuelve a su argumento false, undefined, null, "", 0, o [], manillares no van a hacer que el bloque'. Debería haber revisado los documentos primero.

— gfullam

8

Si desea verificar si una colección (cursor) está vacía o no, las respuestas anteriores no serán útiles, en su lugar debe usar el count()método:

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

— Karl.S
fuente

2

@BasicWolf no lo hace, el recuento funciona con el cursor, si tiene una longitud de uso de matriz en su lugar.

— Karl.S

Esto funciona muy bien para verificar entre una matriz y un objeto, y para manejarlos de manera diferente.

— Ryan Walton

2

Para cualquiera que necesite usar un {{#each}} encima de {{#if}} (es decir, un bucle if dentro de un bucle for). ¿Tienen tres listas diferentes de matrices?

Usar una búsqueda dentro de una declaración if me resuelve el problema. Como, las respuestas anteriores no resolvieron mi problema.

Aquí está mi código

{{#each OtherRandomItems}}

  {{this}}

  {{lookup ../AnotherRandomItems @index}}

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

{{/each}}

— Akarsh SEGGEMU
fuente