handlebars.js “each” 在另一个 “each” 中循环

【问题标题】：handlebars.js “each” loop inside another “each”handlebars.js “each” 在另一个 “each” 中循环
【发布时间】：2020-09-06 02:49:25
【问题描述】：

我有两个对象。 1 个对象是 10 个问题，2 个对象是 10 个答案，我需要在嵌套循环中输出它们，但这不起作用。

 {{#each questions}}
     {{#each answers}}
         <p class = "mt-2"> {{this.text}} </p>
         <p> {{this.value}} </p>
     {{/ each}}
 {{/ each}}

我也试过这个选项：

 {{#each questions}}
     {{#each ../answers}}
         <p class = "mt-2"> {{../ this.text}} </p>
         <p> {{this.value}} </p>
     {{/ each}}
 {{/ each}}

但在这种情况下，每个问题答案会显示 10 次。我尝试了很多次不同的选项

【问题讨论】：

标签： handlebars.js

【解决方案1】：

看起来问题在于您嵌套了两个循环。这意味着对于每个问题，它每次都会输出所有答案。

如果我没看错你的问题，你正试图输出question1, answer1, question2, answer2, etc.，所以你必须改为使用@index在循环内查找相应的答案。

这可以使用{{#with (lookup ../answers @index)}} 来更改上下文，如下所示：

 {{#each questions}}
     <p class = "mt-2"> {{this.text}} </p>
     <p> {{this.value}} </p>
     {{#with (lookup ../answers @index)}}
     <p class = "mt-2"> {{text}} </p>
     <p> {{value}} </p>
     {{/with}}
 {{/ each}}

【讨论】：