在两次迭代相同阵列时，把手会打印错误的东西

Question

试图从数组中打印2个项目的所有组合。

var source = document.getElementById("entry-template").innerHTML; 
 
var template = Handlebars.compile(source); 
 
var context = { 
 
    colors: ['red', 'blue', 'green'] 
 
}; 
 
var html = template(context); 
 
document.getElementById("output").innerHTML = html;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script> 
 
<script id="entry-template" type="text/x-handlebars-template"> 
 
output: 
 
    {{#colors}} 
 
     {{#../colors}} 
 
    color1: {{../this}} color2: {{this}}; 
 
     {{/../colors}} 
 
    {{/colors}} 
 
</script> 
 
<pre id="output"> 
 
    </pre>

这里是一个Codepen Demo

Answer 1

我还不知道是什么导致它的行为是那样，但你可以通过使用块参数修复它。

var source = document.getElementById("entry-template").innerHTML; 
 
var template = Handlebars.compile(source); 
 
var context = { 
 
    colors: ['red', 'blue', 'green'] 
 
}; 
 
var html = template(context); 
 
document.getElementById("output").innerHTML = html;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script> 
 
<script id="entry-template" type="text/x-handlebars-template"> 
 
output: 
 
    {{#colors as |color1|}} 
 
     {{#../colors as |color2|}} 
 
    color1: {{color1}} color2: {{color2}}; 
 
     {{/../colors}} 
 
    {{/colors}} 
 
</script> 
 
<pre id="output"> 
 
    </pre>