How do I add a separator between elements in an {{#each}} loop except after the last element?
ember.js, handlebars.js, javascript
Solution
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: ',';
}
Problem
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}} ```