检查每个助手中的项目是否最后

Question

I have a set of items and I want to make a row element around every 4 items, I found this helper here

https://funkjedi.com/technology/412-every-nth-item-in-handlebars/

Handlebars.registerHelper('grouped_each', function(every, context, options) {
    var out = "", subcontext = [], i;
    if (context && context.length > 0) {
        for (i = 0; i < context.length; i++) {
            if (i > 0 && i % every === 0) {
                out += options.fn(subcontext);
                subcontext = [];
            }
            subcontext.push(context[i]);
        }
        out += options.fn(subcontext);
    }
    return out;
});

Which accompanied with the each helper I can do this

{{#grouped_each 4 data}}
<div class="message-row">
  {{#each this}}
    <div class="message">
      [Content here...]
    </div>
  {{/each}}
</div>
{{/grouped_each}}

Which works well, every 4 items I get a new row element, but the last row will always be one element short, because in the last elements place I want to play a generic "Read more" type of item.

Ideally I would just like something like this

{{#grouped_each 4 data}}
<div class="message-row">
  {{#each this}}
    <div class="message">
      [Content here...]
    </div>
    {{#if $last}}
      <div class="message">
        [Content for last item here...]
      </div>
    {{/if}}
  {{/each}}
</div>
{{/grouped_each}}

Where the helper can just make that isLast variable true when it's on the final item, and thus render the final read more item after the final item has been rendered. I'm having trouble understanding how I can pass a variable to the helper that tells me that.

I've seen this work before but I can't seem to tweak the snippets I've seen to work for my scenario.

Answer 1

I think what you want to do, if indeed you want to do it this way, is to append a "last: true" key/value to your subcontext that is output by your helper, instead of trying to pass something into the helper, so that the template gets access to it. This may require re-shaping the data structure of your subcontext a bit. But then you would be able to check

{{#if this.last}}
    <somestuff></somestuff>
{{/if}}

Here's a quick shot at how you might do that using your own code from above:

Handlebars.registerHelper('grouped_each', function(every, context, options) {
var out = "", subcontext = {}, i;
if (context && context.length > 0) {
    for (i = 0; i < context.length; i++) {
        if (i > 0 && i % every === 0) {
            out += options.fn(subcontext);
            subcontext.list = [];
        }
        if (i === context.length - 1){
            subcontext.last = true;
        }
        subcontext.list.push(context[i]);
    }
    out += options.fn(subcontext);
}
return out;
});

then in your template do:

{{#grouped_each 4 data}}
<div class="message-row">
  {{#each this.list}}
    <div class="message">
      [Content here...]
    </div>
    {{#if this.last}}
      <div class="message">
        [Content for last item here...]
      </div>
    {{/if}}
  {{/each}}
</div>
{{/grouped_each}}