loop condizionale in moustache.js

Question

Come posso emettere <hr> dopo ogni iterazione eccetto uno con mustache.js. Ho provato javascript per loop ma non sono riuscito a liberarmi dell'ultimo <hr>. (Alcuni suggeriscono usando handlebars.js ma vorrei stare con i baffi.)

Ecco il mio JSON (l'elenco diventa più grande, come più dipendenti vengono aggiunti)

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

voglio che questo output HTML:

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

Answer 1

Guardando lo Mustache Manual, è possibile utilizzare le cosiddette "sezioni invertite". Dal manuale:

Una sezione invertita inizia con un cursore (cappello) e termina con una barra. Questo è {{^ person}} inizia una sezione "persona" invertita mentre {{/ person}} lo conclude.

Mentre le sezioni possono essere utilizzate per il rendering del testo una o più volte in base a il valore della chiave, le sezioni invertite possono rendere il testo una volta basato su il valore inverso della chiave. Cioè, saranno resi se la chiave non esiste, è falsa, o è una lista vuota.

Per utilizzare questo, è possibile aggiungere un attributo extra all'ultimo dipendente per distinguerlo.

JSON:

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

baffi Template:

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

Questo è molto simile a quello che i Mustache Demo vetrine, utilizzando la "prima" attributo sul primo oggetto nella gamma di colori.

Answer 2

Se lo scopo di <hr/> è puramente per stile, perché non utilizzare un selettore CSS come :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