conditional on last item in array using handlebars.js template
Since Handlebars 1.1.0, first and last has become native to the each helper. See ticket #483.
The usage is like Eberanov's helper class:
{{#each foo}} <div class='{{#if @first}}first{{/if}}{{#if @last}} last{{/if}}'>{{@key}} - {{@index}}</div>{{/each}}
As of Handlebars v1.1.0, you can now use the
@first
and@last
booleans in the each helper for this problem:
{{#each foo}} <div class='{{#if @first}}first{{/if}} {{#if @last}} last{{/if}}'> {{@key}} - {{@index}} </div>{{/each}}
A quick helper I wrote to do the trick is:
Handlebars.registerHelper("foreach",function(arr,options) { if(options.inverse && !arr.length) return options.inverse(this); return arr.map(function(item,index) { item.$index = index; item.$first = index === 0; item.$last = index === arr.length-1; return options.fn(item); }).join('');});
Then you can write:
{{#foreach foo}} <div class='{{#if $first}} first{{/if}}{{#if $last}} last{{/if}}'></div>{{/foreach}}
If you just try to handle the first item of the array, this may help
{{#each data-source}}{{#if @index}},{{/if}}"{{this}}"{{/each}}
@index is provided by the each helper and for the first item, it would be equal to zero and thus can be handled by the if helper.