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

我无法访问每个循环中的过滤器[类型]和过滤器[位置]。

在我的CSS中，我使用的是名为.cars-type和.cars-location的类。我希望能够单独设置每个列表的样式，并且不幸地将每个列表定位为一个类。我想在每个循环中应用这些样式。

我可以使用{{@key}}在过滤器循环中完成此操作，但不能在每个循环中使用

我试过

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

但这只是返回像福特一样的车型 - 我想要钥匙即。在这种情况下'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和Lookup helper in handlebars，但没有任何解决方案的运气

编辑以下是我想要制作的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不能是另一个<li class="cars-{{@../key}} color-{{@key}}">{{this}}</li>的直接孩子。见starting value

话虽如此，我们可以解决您的问题。 https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context有我们的答案：

嵌套每个块可以通过基于深度访问交互变量路径。例如，要访问父索引，{{@ .. / index}}可以使用

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

generate.php

访问父子数组键handlbars

1 个答案: