1

次の配列/サブ配列構造があります

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

および次のハンドルバー テンプレート

{{#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}}

各 this ループ内でフィルター [types] とフィルター [locations] にアクセスするのに問題があります。

私の CSS では、.cars-typeandというクラスを使用しています.cars-location。各リストを個別にスタイルできるようにしたいのですが、残念ながら、各リストをクラスでターゲットにしています。各 this ループ内でこれらのスタイルを適用したいと思います。

{{@key}}各 this ループではなく、フィルターループ内で使用できます

私はもう試した

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

しかし、これはフォードのよ​​うな車のタイプを返すだけです-キーが必要です。この場合は「34」

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

ハンドルバーヘルパールックアップを使用していますが、やはりうまくいきません

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

そして、私に与える上記[object Object]

ハンドルバーをチェックアウトしました。部分的に親コンテキストにアクセスできますか? 、handlebars.js：パーシャルの相対パスが機能せず、ハンドルバーのルックアップヘルパーが解決策のいずれにも運がない

編集これが私が生成したいHTML出力です

<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>
       <li class="cars-locations__filters">
          <ul>
            <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>
       </li>
    </ul>
</div>
4

1 に答える 1