I solved my problem. It required creating a private variable for the index in the outer helper and accessing it in the inner helper, via options.data.index. Since the inner helper is associated with a child template, the inner helper has access to the variable.
Template
{{#createCarouselSlides 2 products}}
<div id="slide-{{@index}}">
{{#createCarouselItemr 2 ../products}}
<div class="product">
<span class="product-name">{{Name}}</span>
</div>
{{/createCarouselItem}}
</div>
{{/createCarouselSlides}}
Helpers
; (function ($, Handlebars, window, document, undefined) {
/* Outer function */
Handlebars.registerHelper('createCarouselSlides', function (productsPerSlide, context, options) {
var result = "";
/* Create the necessary number of slides */
for (var i = 0; i < Math.ceil(context.length / productsPerSlide); i += 1) {
if (options.data) {
data = Handlebars.createFrame(options.data || {});
data.index = i;
}
result += options.fn(context[i], { data: data });
}
return result;
});
/* Inner Function */
Handlebars.registerHelper('createCarouselItem', function (productsPerSlide, context, options) {
var result = "",
currentItemIndex = "";
/* Create the necessary number of items per slide */
for (var j = 0; j < productsPerSlide; j += 1) {
currentItemIndex = (options.data.index * productsPerSlide) + j;
if (currentItemIndex < context.length) {
result += options.fn(context[currentItemIndex]);
}
}
return result;
});
})(jQuery, Handlebars, window, document);