访问父子数组键把手答案

【问题标题】：access parent sub array key handlbars访问父子数组键把手
【发布时间】：2016-05-24 10:29:07
【问题描述】：

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

"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 的类。我希望能够单独设置每个列表的样式，但不幸的是，每个 li 都有一个类。我想在每个 this 循环中应用这些样式。

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

我试过了

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

【问题讨论】：

filters 应该是一个对象数组吗？
这里似乎有些混乱。 filters["types"] 是一个对象；用它建立一个类名是没有意义的。我认为你应该提供你想要的 HTML 结果。那么这里的人会很乐意为您提供帮助。
@76484 我已经添加了我期望的 HTML 输出

标签： handlebars.js handlebarshelper

【解决方案1】：

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

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

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

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

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

【讨论】：