访问父子数组键把手

Question

我有以下数组/子数组结构

"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 循环中的过滤器[类型]和过滤器[位置]时遇到问题。

在我的 CSS 中，我使用了一个名为 .cars-type 和 .cars-location 的 classes。我希望能够分别设置每个列表的样式，不幸的是，每个 li 都带有 class。我想在每个 this 循环中应用这些样式。

我可以在过滤器循环中使用 {{@key}} 但不能在每个 this 循环中使用

我试过了

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

但这只是 returns 福特之类的车型 - 我想要钥匙，即。在这种情况下为“34”

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

使用车把助手 lookup 但又一次运气不佳

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

上面的内容给了我 [object Object]

我已经检查过 handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working and 但没有找到任何解决方案

EDIT 这是我想要生成的 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>

Answer 1

您应该重新考虑您的 HTML，因为 ul 不能是另一个 ul 的直系子代。参见 https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context

话虽如此，我们可以解决您的问题。 Handlebars docs 有我们的答案：

Nested each blocks may access the interation variables via depth based paths. To access the parent index, for example, {{@../index}} can be used.

因此，您的问题行应如下所示：

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

访问父子数组键把手

access parent sub array key handlbars

handlebars.js

handlebarshelper