Question

在 Handlebars.js 中，如何使用@index下标到我传递给模板的对象中的另一个并行数组？

例如，假设我的对象设置如下：

var table = {
    cols : [
        { name: "Column 1" },
        { name: "Column 2" },
        { name: "Column 3", highlighted: true }
    ],
    rows : [
        {
            label: "Row 1",
            data: [
                { val: 5 },
                { val: 3 },
                { val: 8 }
            ]
        },
        {
            label: "Row 2",
            data: [
                { val: 8 },
                { val: 4 },
                { val: 0 }
            ]
        }
    ]
};

我需要能够使用@index循环中的{{#each rows}}{{#each data}}来检查列是否突出显示以将样式应用于列中的单元格，但是 Handlebars.js 似乎不允许在下标运算符中使用@index。

E.g。

{{@index}} <!-- Index of current rows.data is 2. -->

{{#if ../../cols.[@index].highlighted }}
    <!-- Never Executed -->
{{/if}}

{{#if ../../cols.[2].highlighted }}
    <!-- Executes -->
{{/if}}

这不受支持吗？难道我做错了什么？我怎样才能让它轻松工作？

我发布了example on jsfiddle.net。

Answer 1

@key和@index特别表现，而不是变量。因此，即使您可以使用myvar.[123]，即使myvar.[@key]为123，也无法使用@key。（至少，从Handlebars 1.3.0开始）

有两种解决方案。第一种是编写自己的把手助手，它需要两个数组/对象。第二种是重构数据，即合并两个并行数组。

作为后一种方法的一个例子，如果你有这两个数组：

var X={
  cat:"meow",
  sheep:"baaa"
  };
var Y={
  cat:3,
  sheep:5
  };

然后你可以这样做：

var Z={};
for(var ix in X){
  Z[ix]={X:X[ix],Y:Y[ix]};
  }

然后将Z传递给您的把手模板：

myTemplate({animals:Z});

可能如下所示：

{{#each animals}}
  The {{@key}} goes {{this.X}}; we have {{this.Y}} of them.
{{/each}}

相应的索引到并行数组

1 个答案: