javascript - 检查项目是否位于每个助手中的最后一个

Question

我有一组项目，我想在每 4 个项目周围创建一个行元素，我在这里找到了这个助手

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;
});

有了每个 helper 我才能做到这一点

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

效果很好，每 4 个项目我都会得到一个新的行元素，但最后一行总是会短一个元素，因为在最后一个元素中我想播放通用的“阅读更多”类型的项目。

理想情况下我想要这样的东西

{{#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}}

当 isLast 变量位于最终项目上时，助手可以将其设置为 true，从而在渲染最终项目后渲染最终的阅读更多项目。我无法理解如何将变量传递给告诉我这一点的助手。

我以前见过这项工作，但我似乎无法调整我所看到的片段以适合我的场景。

Answer 1

我认为你想要做的，如果你确实想这样做，是将一个“last: true”键/值附加到你的助手输出的子上下文中，而不是试图将一些东西传递到助手，以便模板可以访问它。这可能需要稍微重新调整子上下文的数据结构。但随后你就可以检查

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

以下是如何使用上面您自己的代码来完成此操作的快速说明:

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;
});

然后在您的模板中执行以下操作:

{{#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}}