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

伴随着每个助手，我可以做到这一点

{{#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变量为真，从而在最终项目呈现后呈现最终读取更多项目。我无法理解如何将变量传递给告诉我的帮助器。

我以前见过这项工作，但我似乎无法调整我看到的为我的方案工作的片段。

Answer 1

我认为你想要做的事情，如果确实你想这样做，就是追加一个＆＃34; last：true＆＃34;您的帮助程序输出的子上下文的键/值，而不是尝试将某些内容传递给帮助程序，以便模板可以访问它。这可能需要重新调整子上下文的数据结构。但是你可以检查

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

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

1 个答案: