What I most often see Handlebars #each used for is displaying data from some structure in memory (like a list of names for instance).
I'm not doing that in this case. I've got a case in my app (backbone marionette) where I'm looping through a directory of images and displaying. The only data I have is the total image count. Smells like a pure for loop.
The images in the directory are always named with numbers, like:
1.jpg
2.jpg
3.jpg
and so on...
A for loop index, therefore, would indicate image file name.
So my pseudo code at this juncture looks like:
For (int i=1 to the total image count) {
<img src="path_to_image_directory/" + i + ".jpg">
}
Some searching on "Handlebars for loop" turns up a prescription like this:
Iterating over basic “for” loop using Handlebars.js
So I've attempted to implement that prescription in my Marionette ItemView. I figure if I can get that particular prescription to compile and run, I'll edit it to my needs. But I get the error "You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined".
My ItemView code is below. I think I'm passing the result of a "for" templateHelper. Obviously I'm not. What do I have wrong here?
ItemView Code:
var ForLoopExampleItemView = Marionette.ItemView.extend({
tagName: "div",
template: Handlebars.compile(
'{{#for 0 10 2}}' +
'<span>{{this}}</span>' +
'{{/for}}'
),
templateHelpers: function(){
return {
for: function (from, to, incr, block) {
var accum = '';
for (var i = from; i < to; i += incr)
accum += block.fn(i);
return accum;
}
}
}
});