我有一组项目,我想在每 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,从而在渲染最终项目后渲染最终的阅读更多项目。我无法理解如何将变量传递给告诉我这一点的助手。
我以前见过这项工作,但我似乎无法调整我所看到的片段以适合我的场景。
最佳答案
我认为你想要做的,如果你确实想这样做,是将一个“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}}
关于javascript - 检查项目是否位于每个助手中的最后一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31840422/