In Mustache templating is there an elegant way of expressing a comma separated list without the trailing comma?

mustache
John Kane picture John Kane · May 24, 2011 · Viewed 39.6k times · Source

I am using the Mustache templating library and trying to generate a comma separated list without a trailing comma, e.g.

red, green, blue

Creating a list with the trailing comma is straightforward, given the structure

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

and the template

{{#items}}{{name}}, {{/items}}

this will resolve to

red, green, blue,

However I cannot see an elegant way of expressing the case without the trailing comma. I can always generate the list in code before passing it into the template, but I was wondering whether the library offers an alternative approach such as allowing you to to detect whether it is the last item in a list within the template.

Answer

Clyde picture Clyde · Sep 29, 2011

I think a better way is to change the model dynamically. For example, if you are using JavaScript:

model['items'][ model['items'].length - 1 ].last = true;

and in your template, use inverted section: 

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

to render that comma.

Related questions

How do I accomplish an if/else in mustache.js?

It seems rather odd that I can't figure how to do this in mustache. Is it supported? This is my sad attempt at trying: {{#author}} {{#avatar}} <img src="{{avatar}}"/> {{/avatar}} {{#!avatar}} <img src="/images/default_avatar.png" …

Read More
What are the differences between Mustache.js and Handlebars.js?

Major differences I've seen are: Handlebars adds #if, #unless, #with, and #each Handlebars adds helpers Handlebars templates are compiled (Mustache can be too) Handlebars supports paths Allows use of {{this}} in blocks (which outputs the current item's string value) Handlebars.…

Read More
jQuery + client-side template = "Syntax error, unrecognized expression"

I just updated jQuery from 1.8.3 to 1.9, and it started crashing all of a sudden. This is my template: <script type="text/template" id="modal_template"> <div>hello</div> </script> This is how …

Read More