Handlebars中{{#times}}嵌套{{#each}}无法渲染teamName的问题

问题根源是Handlebars上下文切换：你的times助手在循环时，将块内的上下文替换成了循环变量i（数字），而team数据存放在times块的父级上下文中，直接写{{#each team}}会找不到对应数据——当前上下文是数字i，它没有team属性。

下面提供两种可行的解决办法：

方案1：修改模板，通过父级路径访问team #

在times块内，使用../引用父级上下文的team数据，直接修改模板中的each部分：

<select name="groupNo{{this}}" id="" multiple>
    {{#each ../team}}
    <option value="{{_id}}">{{teamName}}</option>
    {{/each}}
</select>

如果team数据在根上下文（最外层），也可以用@root.team直接定位：

{{#each @root.team}}
<option value="{{_id}}">{{teamName}}</option>
{{/each}}

方案2：修改times助手，保留原上下文 #

调整times助手的实现，让它在渲染循环块时保留原有的上下文，同时传递循环索引：

const hbs = exphbs.create({
    "helpers": {
        "times": function(n, block) {
            let accum = '';
            const parentCtx = this;
            for (let i = 1; i <= n; ++i) {
                // 合并原上下文和循环索引，作为新的上下文传入
                accum += block.fn({ ...parentCtx, groupIndex: i });
            }
            return accum;
        },
        "eq": function (a, b) {
            return a === b;
        }
    }
});

同时修改模板中引用循环索引的部分，用{{groupIndex}}代替原来的{{this}}：

<h2>Grup {{groupIndex}}</h2>
<select name="groupNo{{groupIndex}}" id="" multiple>
    {{#each team}}
    <option value="{{_id}}">{{teamName}}</option>
    {{/each}}
</select>

两种方案都能解决你的问题，方案1无需修改助手代码，更快捷；方案2让上下文逻辑更清晰，适合复杂场景。

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