如何在Handlebars.js中实现EJS的continue循环关键字功能？

问题说明 #

之前用EJS写循环时，可以通过continue关键字跳过当前迭代的后续逻辑，但切换到Handlebars.js后，已经自定义了for辅助函数和ifCond判断逻辑，不知道怎么修改for辅助函数来实现同样的continue效果。

原EJS代码 #

<% for(let i = iterator; i <= endingLink; i++) { %>
    <% if(i === page) { %>
        <a class="selectedLink" href="/?page=<%=i%>"><%=i%></a>
        <% continue; %>  // 这个逻辑在Handlebars里不知道怎么实现
    <% } %>
    <!-- 这里是当前迭代中被continue跳过的其他代码 -->
<% } %>

现有Handlebars代码 #

{{#for iterator endingLink 1}}
    {{#ifCond iterator '===' page}}
        <a class="selectedLink" href="/?page={{iterator}}">{{iterator}}</a>
        <!-- 这里需要实现跳过当前迭代后续内容的逻辑 -->
    {{/ifCond}}
    <!-- 这里是需要被跳过的其他内容 -->
{{/for}}

已注册的for辅助函数 #

hbs.registerHelper('for', function(from, to, incr, block) {
    var accum = '';
    for(var i = from; i <= to; i += incr)
        accum += block.fn(i);
    return accum;
});

解决方案 #

Handlebars是声明式模板引擎，不像EJS是命令式的，实现类似continue的效果有两种常用方式：

方法一：用条件判断直接区分逻辑（推荐） #

这是最符合Handlebars设计思路的方式，把需要跳过的内容放在else块中，当满足条件时只渲染选中的标签，否则渲染其他内容：

{{#for iterator endingLink 1}}
    {{#ifCond iterator '===' page}}
        <a class="selectedLink" href="/?page={{iterator}}">{{iterator}}</a>
    {{else}}
        <!-- 这里是原本被continue跳过的所有内容 -->
        <a href="/?page={{iterator}}">{{iterator}}</a>
        <!-- 其他需要执行的逻辑 -->
    {{/ifCond}}
{{/for}}

这种方式逻辑清晰，不需要修改现有for辅助函数，适合大多数场景。

方法二：修改for辅助函数模拟命令式continue #

如果逻辑比较复杂，需要多次触发跳过，可以通过修改for辅助函数，配合标记辅助函数实现：

1. 注册continue标记辅助函数

hbs.registerHelper('continue', function() {
    // 返回一个特殊标记字符串
    return '__HBS_CONTINUE__';
});

2. 修改for辅助函数

hbs.registerHelper('for', function(from, to, incr, block) {
    var accum = '';
    for(var i = from; i <= to; i += incr) {
        let output = block.fn(i);
        // 检查输出中是否包含continue标记
        const continueFlagIndex = output.indexOf('__HBS_CONTINUE__');
        if (continueFlagIndex !== -1) {
            // 只保留标记之前的内容，截断后续部分
            output = output.substring(0, continueFlagIndex);
        }
        accum += output;
    }
    return accum;
});

3. 在模板中使用

{{#for iterator endingLink 1}}
    {{#ifCond iterator '===' page}}
        <a class="selectedLink" href="/?page={{iterator}}">{{iterator}}</a>
        {{continue}} <!-- 触发跳过后续内容 -->
    {{/ifCond}}
    <!-- 这里的内容会被continue跳过 -->
    <a href="/?page={{iterator}}">{{iterator}}</a>
{{/for}}

这种方式更贴近EJS的命令式写法，但需要额外维护标记和辅助函数，适合复杂场景。

内容的提问来源于stack exchange，提问作者Tolkienist Coder