Handlebars自定义for循环助手无法读取变量值问题求助

我需要一个Handlebars版本的for循环，于是注册了自定义助手实现经典的递增for循环结构。现在遇到的问题是：自定义的ifCond助手能正常工作，但for循环失效——在循环内没法使用变量。iterator、page和endingLink是从controller.js渲染来的变量，在循环外能正常读取，但循环内获取不到值，比如<a class="selectedLink" href="/?page={{iterator}}">{{iterator}}</a>里的href和内容都是空的。

自定义for助手代码：

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

前端Handlebars模板代码：

{{#ifCond page '>' 1 }}<a href="/?page={{page}}">Before</a>{{/ifCond}}

{{#for iterator endingLink iteratorInc}}
    {{#ifCond iterator '===' page}}
        <a class="selectedLink" href="/?page={{iterator}}">{{iterator}}</a>
    {{/ifCond}}
    <a href="/?page={{iterator}}">{{iterator}}</a>
{{/for}}
{{#ifCond page '<' numberOfPages }}<a href="/?page={{page}}">After</a>{{/ifCond}}

核心问题 #

你的自定义for助手存在两个关键问题：

1. 直接把循环变量i传给block.fn()，但Handlebars模板内部需要通过上下文对象来访问变量，不是直接传值。
2. 模板里调用{{#for iterator endingLink iteratorInc}}时，循环内尝试访问的iterator其实是外部传入的初始值，不是循环过程中的迭代变量。

修复步骤 #

1. 修改自定义for助手 #

修改助手代码，把迭代变量包装成上下文对象，同时保留原有的模板上下文（这样循环内还能访问page这类外部变量）：

hbs.registerHelper('for', function(from, to, incr, block) {
    let accum = '';
    // 保留原上下文，确保循环内能访问外部变量
    const context = Object.create(this);
    for(let i = from; i <= to; i += incr) {
        // 把迭代变量i挂载到上下文的iterator属性上
        context.iterator = i;
        accum += block.fn(context);
    }
    return accum;
});

2. 调整模板逻辑（可选优化） #

原模板里会重复输出链接（选中和未选中的都输出），可以加个{{else}}避免重复：

{{#ifCond page '>' 1 }}<a href="/?page={{page}}">Before</a>{{/ifCond}}

{{#for iterator endingLink iteratorInc}}
    {{#ifCond iterator '===' page}}
        <a class="selectedLink" href="/?page={{iterator}}">{{iterator}}</a>
    {{else}}
        <a href="/?page={{iterator}}">{{iterator}}</a>
    {{/ifCond}}
{{/for}}

{{#ifCond page '<' numberOfPages }}<a href="/?page={{page}}">After</a>{{/ifCond}}

3. 验证变量传递 #

确保controller.js里传入的iterator（起始值）、endingLink（结束值）、iteratorInc（步长）都是合法的数值类型，避免因类型问题导致循环不执行。

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