Tratando con una lista vacía en mustache.js

Estoy usando mustache.js para representar una plantilla en javascript. Me gustaría comprobar si una lista está vacía o no para ocultar la etiqueta <h2> en el siguiente ejemplo. ¿Es esto posible o bigote.js también sin lógica?Tratando con una lista vacía en mustache.js

Esta es la plantilla:

<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    {{name}} 
    {{/persons}} 
</ul>

y estos son los datos:

{ 
    "persons":[ 
    {"name": "max"}, 
    {"name": "tom"} 
    ] 
}

Fuente

2012-01-05 Max Schmidt

La "información" no es válida JSON. –

Además, es posible que desee pensar en cambiar de bigote a [manillares] (http://handlebarsjs.com/), lo que con mucho más gracia (¿me atrevería a decirlo?) _manejar_ casos como este. Esta no es la primera vez que alguien solicita (y se le niega) y la prueba de la lista vacía en bigote: https://github.com/defunkt/mustache/issues/47. –

@ MДΓΓБДLL Te estoy castigando por no hacer una respuesta a tu comentario (que felizmente habría votado) al publicarlo como una respuesta y robar tus deliciosos puntos de karma. – andrewrk

Para mantener su plantilla de lógica-menos, usted puede hacer esta comprobación antes de renderizar la plantilla:

// assuming you get the JSON converted into an object 
var data = { 
    persons: [ 
     {name: "max"} 
     , {name: "tom"} 
    ] 
}; 
data.hasPersons = (data.persons.length > 0);

A continuación, la plantilla se verá así:

<h2>Persons:</h2> 
{{#hasPersons}} 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/hasPersons}}

Fuente

2012-03-21 15:15:06

Tanto como esta es una respuesta correcta, creo que tener que usar este tipo de enfoque es un signo de debilidad real en la sintaxis de Moustache. Tal vez esté bien siempre y cuando el desarrollador del front-end (plantilla) tenga acceso al código de fondo (fuente de datos), pero si los dos están separados o el front-end dev es más un hollín HTML que un codificador, va a ser bastante bonito impracticable. –

@TimHolt bien, definitivamente entiendo tu punto. Sin embargo, hay ventajas. Supongamos que quieres probar esta parte de tu aplicación. Con un motor de plantillas sin lógica, estoy contento con solo probar los datos (antes de alimentar a Moustache) y no tener que hacer pruebas de comparación de cadenas en el html resultante. Ahora, si mi plantilla tuviera lógica (incluso tan simple como verificar .length> 0) sentiría la necesidad de probar la lógica de la unidad, y me vería obligado a hacer una comparación de cadenas o algo así como un robot de selenio/doh. . Entonces, esa es la compensación en mi opinión. –

El propósito de la creación de plantillas es separar la Vista de los Modelos y Controladores. Esta solución básicamente mueve la metainformación View en el Controlador. El hecho de que Moustache te obligue a hacer estas cosas derrota su propio propósito. Las plantillas no deben ser lógicas (una instrucción if también es lógica, por lo que no es lógica de todos modos), pero las plantillas deben contener view-logic y no application-logic. –

Uso handlebars lugar. Es un superconjunto de Moustache que te da ese poquito más de energía que necesitas. La comunidad de bigotes solicitó esta característica, pero el mantenedor refuses to put it in.

Fuente

2012-01-22 09:00:16 andrewrk

Después de luchar durante medio día con este problema, ¡finalmente encontré una solución fácil!

No revise la lista, pero verifique si el primer elemento no está vacío.

Plantilla:

{{#persons.0}} 
<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/persons.0}} 
{{^persons.0}}No persons{{/persons.0}}

datos:

{ 
    "persons":[ 
    {"name": "max"}, 
    {"name": "tom"} 
    ] 
}

Salida:

<h2>Persons:</h2> 
<ul> 
    <li>max</li> 
    <li>tom</li> 
</ul>

datos:

{ 
    "persons": [] 
}

Salida:

"No Persons"

Fuente

2013-01-19 18:40:00

¡Esta respuesta debe ser aceptada! Es una solución genérica, solo de bigote que no supone javascript – Evgeny

No funcionó para mí. Estoy usando Mustashe.java. Esta falta de condicional en el vacío es un factor decisivo para mí. Volver a FreeMarker ... – dhalsim2

Esto funciona. Al igual que para agregar, para una lista sin nombre, que se enlaza utilizando {{#.}}, Entonces {{^.}} No se pueden usar Personas {{/.}}. – Blizwire

Podría usar persons.length. Si es un valor verdadero (es decir, mayor que 0), entonces se representará el bloque.

{{#persons.length}} 
<h2>Persons:</h2> 
<ul> 
    {{#persons}} 
    <li>{{name}}</li> 
    {{/persons}} 
</ul> 
{{/persons.length}}

Fuente

2013-01-21 11:09:46 Qazzian

esto no funciona si está renderizando el lado del servidor (fuera de javascript) – iwein

@iwein: la pregunta * fue * etiquetada 'javascript' después de todo, y funciona en el nodo, también :) @Qazzian: +1, una limpia forma de evitar bigotes lambdas! –

@ o.v. Le di una respuesta a esta respuesta, no te preocupes. Sin embargo, la información adicional en el comentario me hubiera sido útil. – iwein

en JavaScript se puede comprobar con {{#names.length}}{{/names.length}} o con {{#names.0}}

Si estás fuera de Javascript (por ejemplo, en pystache o Scalate), estás de suerte. Entonces, la única solución es introducir un booleano por separado, o anidar su matriz en un objeto que evite por completo si tiene una matriz vacía, como maxbeatty sugerida.

Fuente

2013-07-24 15:04:57 iwein

Tratando con una lista vacía en mustache.js

Respuesta

Cuestiones relacionadas