Zugang Mutter Subarray Schlüssel handlbars

Question

Ich habe folgende Array/Subarray Struktur

"filters": { 
    "types": { 
     "34": "Ford", 
     "22": "Jeep", 
     "18": "Porsche", 
    }, 
    "locations": [ 
     "Earth", 
     "Mars", 
     "Moon", 
    ] 
} 

und der folgenden Lenker template

{{#if filters}} 
    {{#each filters}} 
     <div class="cars"> 
      <ul class="cars__list"> 
       <li class="cars-{{@key}}__title">Filter by {{@key}}:</li> 
       <li class="cars-{{@key}}__filters"> 
        <ul> 
        <li class="cars-{{@key}}">View All</li> 
        {{#each this}} 
         <li class="cars-{{*want to access filters[key]*}} color={{@key}}">{{this}}</li> 
        {{/each}} 
        </li> 
       </li> 
      </ul> 
     </div> 
    {{/each}} 
{{/if}} 

ich Probleme, die Zugriff auf Filter [types] und Filter [Orte] innerhalb jeder dieser Schleife. In meinem CSS verwende ich eine Klasse namens .cars-type und .cars-location. Ich möchte in der Lage sein, jede Liste einzeln zu stylen und leider jede li mit einer Klasse anzusprechen. Ich möchte diese Stile innerhalb jeder dieser Schleifen anwenden.

Ich kann es innerhalb der Filter-Schleife tun, indem {{@key}} verwenden, aber nicht in der jeder dieser Schleife

Ich habe versucht

<li class="cars-{{../filters}}">{{this}}</li> 

aber dies gibt nur den Fahrzeugtyp wie ford - ich will Schlüssel dh. '34' in diesem Fall

<li class="cars-{{lookup ../filters @index}}">{{this}}</li> 

mit Lenker Helfer lookup aber wieder kein Glück

<li class="cars-{{../this}}">{{this}}</li> 

und die oben, die mir gibt [object Object]

Ich habe ausgecheckt handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working und Lookup helper in handlebars aber Kein Glück mit irgendeiner der Lösungen

EDIT Hier ist der HTML-Ausgabe, die ich produzieren will

<div class="cars"> 
    <ul class="cars__list"> 
     <li class="cars-types__title">Filter by types:</li> 
     <li class="cars-types__filters"> 
      <ul> 
      <li class="cars-types">View All</li> 
      <li class="cars-types color-34">Ford</li> 
      <li class="cars-types color-22">Jeep</li> 
      <li class="cars-types color-18">Porsche</li> 
      </ul> 
     </li> 
    </ul> 
    <ul class="cars__list"> 
     <li class="cars-locations__title">Filter by locations:</li> 
     <ul class="cars-locations__filters"> 
      <li class="cars-locations">View All</li> 
      <li class="cars-locations color-0">Earth</li> 
      <li class="cars-locations color-1">Mars</li> 
      <li class="cars-locations color-2">Moon</li> 
     </ul> 
    </ul> 
</div> 

Answer 1

Sie sollten Ihre HTML überdenken, weil ein ul kein direktes Kind eines anderen ul sein kann. Siehe https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context

Damit können wir Ihr Problem lösen. Die Handlebars docs haben unsere Antwort:

Nested jeweils Blöcke die interation Variablen über Tiefe Pfade basierend zugreifen können. Um auf den übergeordneten Index zuzugreifen, kann beispielsweise {{@ ../index}} verwendet werden.

Daher Ihre problematische Zeile sollte wie folgt aussehen:

<li class="cars-{{@../key}} color-{{@key}}">{{this}}</li>