同じ配列を3回繰り返したときにハンドルバーが間違ったものを出力する

Question

私はlast postで解決したと思っていましたが、| var |ループ内でループを処理しました。

しかし、私は3番目のものを内側に投げた場合、最初の2つが一致すれば3番目のループは実行されません。

例コードを見ると、2つの組み合わせごとに3つのバリエーションがあるはずですが、最初の2つが赤/赤のように一致すると、{{＃../../colors as | color3 | }}部分。

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

Answer 1

私はこの問題を調査し、あなたがhttps://stackoverflow.com/a/40955937/3397771で読むことができ、その原因の説明を、提供。

問題の要点は、新しいコンテキストオブジェクトが現在スタックの一番上にあるものと等しい場合、Handlebarsはスタックにコンテキストオブジェクトを追加しないことです。この場合の等号は、StringsやNumbersなどのプリミティブの場合、の値がの単純なJavaScriptの比較に過ぎません。つまり、内部ループと外部ループが同じ値（'red'/'red'）を持つ場合と、異なる値（'red'/'blue'）を持つ場合のルートコンテキストへのパスが異なることを意味します。

あなたの問題を解決する方法は、ルートコンテキストへの相対パスを使用しないようにHandlebars @root variableを使用することです。あなたのテンプレートには、次のようになります。

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

または代わり：

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