1

在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 }
            ]
        }
    ]
};

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

例如

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

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

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

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

我在 jsfiddle.net 上发布了一个示例。

4

1 回答 1

1

@key并且@index表现得特别，而不是作为变量。所以，即使你可以使用，即使是 123，myvar.[123]你也不能使用。（至少，从 Handlebars 1.3.0 开始）myvar.[@key]@key

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

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

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}}
于 2014-01-17T13:27:49.973 回答