Comma separated lists with Meteor

If you use the Meteor framework, you might have run into the comma-separated list problem. Basically, there's no easy way to make one using an {{each}} loop, because the Meteor team haven't yet implemented Handlebar's @index (although it's on their agenda).

In the meantime though, there's a really easy workaround which uses CSS (purists: come back after an hour of Meteor/Handlebar/JavaScript hacks). Using the :after and :last-child pseudos we can create a perfectly functional comma-separated list, like so:

.comma-list { list-style-type: none }
.comma-list li { display: inline }
/* Here's the interesting part: */
.comma-list li:after { content: ", " }
.comma-list li:last-child:after { content: "" }

And now this:

<ul class="comma-list">
    <li>First item</li>
    <li>Second item</li>
    <li>Last item</li>
</ul>

Will look like this:

First item, Second item, Last item