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 循环中的过滤器 [类型] 和过滤器 [位置]。

在我的 CSS 中，我使用了一个名为.cars-typeand的类.cars-location。我希望能够单独设置每个列表的样式，但不幸的是，每个 li 都有一个类。我想在每个 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

3

您应该重新考虑您的 HTML，因为 aul不能是 another 的直接子级ul。请参阅https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context

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

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

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

<li class="cars-{{@../key}} color-{{@key}}">{{this}}</li>
于 2016-05-28T00:58:06.763 回答