1

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;
                }
            }
        }
    });
Community
  • 1
  • 1
Robert
  • 820
  • 2
  • 12
  • 26
  • Edited to clarify distinction between this an another similar post. Please unmark as duplicate. – Robert Apr 17 '14 at 20:55

0 Answers0