当通过相同的数组迭代三次时，把手会打印错误的东西 [英] Handlebars prints wrong thing when iterating through same array thrice

问题描述

我以为我已经解决了我的最后发帖，切换为使用| var |

但是现在如果我在里面扔第三个，如果前两个匹配，它不会做第三个循环。

请参阅示例代码，每个组合下应该有三个变体，但如果前两个匹配类似红色/红色，则只会跳过{{＃.. / .. / colors as | color3 |}} part。

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-templatetype =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>

$ b

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

解决方案

我调查了此问题并提供了其原因的解释，您可以在 https：/ /blankoverflow.com/a/40955937/3397771 。

问题的关键在于，Handlebars在新建时不会将上下文对象添加到堆栈上下文对象等于当前位于堆栈顶部的那个对象。在这种情况下，平等仅仅是一个简单的JavaScript比较，对于诸如字符串和数字之类的基元，它是一个值比较。在你的情况下，这意味着当内部和外部循环具有相同的值时，根环境的路径是不同的（'red' / '红色'）比它们具有不同的值时（'red' / 'blue'）。

我会解决你的问题的方法是使用 Handlebars @root 变量为了避免使用相对路径到你的根上下文。您的模板如下所示：

  {{＃@ root.colors as | color1 |}} 
 { {#@root.colors as | color2 |}} 
 {{color1}} / {{color2}}; 
 {{#@@root.colors as | color3 |}} 
 {{color1}} / {{color2}} / {{color3}}; 
 {{/@root.colors}} 
 {{/@root.colors}} 
 {{/root.colors}} 
  
  
 
 
或者： root.colors as | color1 |}} 
 {{#each @ root.colors as | color2 |}} 
 {{color1}} / {{color2}}; 
 {{#each @ root.colors as | color3 |}} 
 {{color1}} / {{color2}} / {{color3}}; 
 {{/ each}} 
 {{/ each}} 
 {{/ each}} 
  

I thought I had this resolved in my last post, switching to using as |var| worked for loops inside loops.

But now if I throw a third one inside, it wont do the third loop if the first two match.

See the example code, there should be three variations under each combination of two, but if the first two match like red/red, then it just skips that {{#../../colors as |color3|}} part.

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

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

解决方案

I investigated this issue and provided an explanation of its cause, which you can read at https://stackoverflow.com/a/40955937/3397771.

The gist of the issue is that Handlebars does not add a context object to the stack when the new context object is equal to the one currently at the top of the stack. Equality in this case is just a simple JavaScript comparison, which, for primitives like Strings and Numbers, is a value comparison. In your case, this means that the path to the root context is different when the inner and outer loops have the same value ('red'/'red') than it is when they have different values ('red'/'blue').

The way I would solve your issue is to use the Handlebars @root variable in order to avoid using the relative path to your root context. Your template would look like the following:

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

Or alternatively:

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

这篇关于当通过相同的数组迭代三次时，把手会打印错误的东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！