bucle condicional en mustache.js

Question

¿Cómo puedo generar <hr> después de cada iteración excepto la última con mustache.js? Intenté javascript for loop pero no pude deshacerme de la última <hr>. (Algunas personas sugieren usar handlebars.js pero me gustaría quedarse con bigote.)

Aquí es mi JSON (la lista se hace más grande a medida que más empleados se agregan)

{ 
     employees: [ 
     {firstName: "John", lastName: "Smith"}, 
     {firstName: "John", lastName: "Doe"}, 
     {firstName: "Jane", lastName: "Doe"}  
     ] 
    } 

Quiero esta salida html:

John Smith 
<hr> 
John Doe 
<hr> 
Jane Doe 

Answer 1

Al mirar Mustache Manual, querrá usar lo que se conoce como "Secciones invertidas". Del manual:

Una sección invertida comienza con un símbolo de intercalación (sombrero) y termina con una barra oblicua. Eso es {{^ persona}} comienza una sección invertida de "persona" mientras {{/ persona}} lo termina.

Mientras que las secciones se pueden usar para representar el texto una o más veces según el valor de la clave, las secciones invertidas pueden mostrar texto una vez basado en el valor inverso de la clave. Es decir, se representarán si la clave no existe, es falsa o es una lista vacía.

Para utilizar esto, puede agregar un atributo adicional al último empleado para distinguirlo.

JSON:

{ 
    "employees": [ 
    {"firstName": "John", "lastName": "Smith"}, 
    {"firstName": "John", "lastName": "Doe"}, 
    {"firstName": "Jane", "lastName": "Doe", "last": true}  
    ] 
} 

Plantilla bigote:

{{#employees}} 
    {{firstName}} {{lastName}} 
    {{^last}} 
    <hr /> 
    {{/last}} 
{{/employees}} 

Esto es muy similar a lo que los Mustache Demo vitrinas, utilizando el "primero" atributo en el primer objeto de la gama de colores.

Answer 2

Si el propósito de <hr/> es puramente de estilo, ¿por qué no utilizar un selector de CSS como :not(:last-child)?

JavaScript:

var tpl = "<ul>{{#employees}}<li>{{firstName}} {{lastName}}</li>{{/employees}}</ul>", 
     data = { 
    "employees": [ 
    {"firstName": "John", "lastName": "Smith"}, 
    {"firstName": "John", "lastName": "Doe"}, 
    {"firstName": "Jane", "lastName": "Doe", "last": true}  
    ] 
}, 
    html = Mustache.to_html(tpl, data); 

document.write(html); 

CSS:

li:not(:last-child) { 
    border-bottom: 1px solid blue; 
} 

Here's a working jsFiddle to see it in action