Verwenden von Indizes in geschachtelten Lenker-Schleifen

Question

Ich versuche, die folgende Tabelle zu erstellen.

Ich habe o an Lenker übergeben (PS. Ich dieses Objekt umstrukturieren könnte. Soll ich?).

var o={ 
years:[1800,1900,2012], 
countries:["Africa","America","Asia","Europe","Oceania"], 
data:[ 
    [107,133,1052], 
    [null,156,954], 
    [635,null,4250], 
    [203,408,740], 
    [2,6,38] 
    ] 
}; 

Nach http://handlebarsjs.com/builtin_helpers.html, kann ich den Index über {{@index}} zugreifen. Aber wie kann ich, da ich zwei Schleifen habe, auf beide zugreifen, um die richtigen Daten zu erhalten?

<table> 
    <thead> 
     <tr> 
      <th></th> 
      {{#each years}} {{!-- is "#each years" and "#years" the same thing??? --}} 
      <th>{{this}}</th> 
      {{/each}} 
     </tr> 
    </thead> 
    <tbody> 
     {{#each countries}} 
     <tr> 
     <td>{{this}}</td> 
     {{#each data}} 
     <tr> 
      <td>{{this}}????</td> 
     </tr> 
     {{/each}} 
     </tr> 
     {{/each}} 
    </tbody> 
</table> 

Answer 1

Zuerst {{#each years}}wird haben das gleiche Ergebnis wie {{#years}}. Die letztere Form ist von Mustache und ist, was die Bibliothek als Section bezeichnet. Die Lenker-Dokumente erklären die differences between Handlebars block expressions and Mustache Sections.

Der Grund, warum Sie {{#each data}} nicht innerhalb Ihrer {{#each countries}} Schleife verwenden können, ist, weil der Datenkontext innerhalb der Länderschleife die aktuelle Länderiteration ist. Sie müssen den übergeordneten Bereich erreichen, um auf das Objekt data zugreifen zu können. Dies geschieht mit Handlebars paths und würde als {{../data}} geschrieben werden.

In unserem Szenario möchten wir jedoch ein bestimmtes Element von data abrufen, dessen Index mit dem Index unserer aktuellen Länderiteration übereinstimmt. Hierfür können wir die lookup helper verwenden. Das Ergebnis wäre das folgende:

<table> 
    <thead> 
     <tr> 
      <th></th> 
      {{#each years}} 
       <th>{{this}}</th> 
      {{/each}} 
     </tr> 
    </thead> 
    <tbody> 
     {{#each countries}} 
      <tr> 
       <td>{{this}}</td> 
       {{#each (lookup ../data @index)}} 
        <tr> 
         <td>{{this}}</td> 
        </tr> 
       {{/each}} 
      </tr> 
     {{/each}} 
    </tbody> 
</table>