javascript - 迭代同一数组两次时，Handlebars 会打印错误的内容

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

我还不确定是什么导致它出现这种行为，但您可以使用 block 参数来修复它。

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>