Question

我以为我已经在我的last post中解决了这个问题，转而使用as | var |为循环内部的循环工作。

但是现在如果我在内部扔第三个，如果前两个匹配则不会进行第三个循环。

参见示例代码，每两个组合下应该有三个变体，但如果前两个匹配像红色/红色，那么它只是跳过{{＃.. / .. / colors as | color3 |}部分。

＆＃13;

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;

＆＃13;

<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}} / {{color2}};
          {{#../../colors as |color3|}}
            {{color1}} / {{color2}} / {{color3}};
          {{/../../colors}}
        {{/../colors}}
        
        
    {{/colors}}
</script>
<pre id="output">
  </pre>

＆＃13;

https://codepen.io/samkeddy/pen/BmNYrZ

Answer 1

我调查了这个问题并提供了原因的解释，您可以在https://stackoverflow.com/a/40955937/3397771阅读。

问题的要点是，当新的上下文对象等于当前位于堆栈顶部的对象时，Handlebars不会向堆栈添加上下文对象。在这种情况下，平等只是一个简单的JavaScript比较，对于像字符串和数字这样的原语，它是一个值比较。在您的情况下，这意味着当内部循环和外部循环具有相同值（'red' / 'red'）时，根上下文的路径不同于它们具有不同值（{{1 }} / 'red'）。

我解决您问题的方法是使用Handlebars @root variable以避免使用根上下文的相对路径。您的模板如下所示：

'blue'

或者：

{{#@root.colors as |color1|}}
    {{#@root.colors as |color2|}}
        {{color1}} / {{color2}};
        {{#@root.colors as |color3|}}
            {{color1}} / {{color2}} / {{color3}};
        {{/@root.colors}}
    {{/@root.colors}}  
{{/@root.colors}}

当迭代相同的数组三次时，把手打印错误的东西

1 个答案: