How do I add a separator between elements in an {{#each}} loop except after the last element?

I have a Handlebars template where I'm trying to generate a comma-separated list of items from an array.

In my Handlebars template:

{{#each list}}
    {{name}} {{status}},
{{/each}}

I want the , to not show up on the last item. Is there a way to do this in Handlebars or do I need to fall back to CSS selectors?

UPDATE: Based on Christopher's suggestion, this is what I ended up implementing:

var attachments = Ember.CollectionView.extend({
    content: [],
    itemViewClass: Ember.View.extend({
        templateName: 'attachments',
        tagName: 'span',
        isLastItem: function() {
            return this.getPath('parentView.content.lastObject') == this.get('content');
        }.property('parentView.content.lastObject').cacheable()
    })
}));

and in my view:

{{collection attachments}}

and the item view:

{{content.title}} ({{content.size}}) {{#unless isLastItem}}, {{/unless}}

I know I'm late to the parts but I found a WAYYYY simpler method

{{#unless @last}},{{/unless}}

Since Ember v1.11 you are able to get the index of an each using block parameters. In your case this would look something like this:

{{#each list as |item index|}}
    {{if index ", "}}{{item.name}} {{item.status}}
{{/each}}

The first index value will be 0 which will evaluate to false and will not be added, all subsequent values will evaluate to true which will prepend a separator.


You can use standard CSS to do this:

li:after {
    content: ',';
}

li:last-of-type:after {
    content: '';
}

I prefer separate rules, but a more concise if slightly less readable version (from @Jay in the comments):

li:not(:last-of-type):after {
    content: ',';
}