如何生成不同车把部分的列表？答案

【问题标题】：How to generate a list of different handlebars partials?如何生成不同车把部分的列表？
【发布时间】：2016-05-31 20:48:45
【问题描述】：

我正在使用带有assemble 的handlebars.js。

我有一个部分列表（它们是 svgs）： icon-blue.hbs、icon-red.hbs、icon-white.hbs 等

我想遍历一个数组并为每个索引生成不同的部分。

我的 JSON 中有以下内容：

"list": [
 {
  "color": "red",
  "val": "Lorem ipsum"
 },
 {
  "color": "blue",
  "val": "Lorem ipsum"
 },
 {
  "color": "white",
  "val": "Lorem ipsum"
 }
]

然后在 index.hbs 我想做这样的事情：

{{#myData}}
  {{#each list}}
    {{> icon-{{color}} }} --> I know this isn't possible, so what can I do instead?
    <span>{{val}}</span>
  {{/each}}
{{/myData}}

有没有办法做到这一点？或任何其他方式来达到预期的结果？

【问题讨论】：

标签： html arrays handlebars.js assemble

【解决方案1】：

在车把中，您需要使用帮助程序来连接或连接变量。

您可以像这样向assemble 添加一个助手：

app.helper('icon', function(name) {
  return 'icon-' + name;
});

然后你可以使用内置的部分助手和把手subexpressions：

{{#myData}}
  {{#each list}}
    {{partial (icon color)}}
    <span>{{val}}</span>
  {{/each}}
{{/myData}}

【讨论】：

@anita 我看到了你建议的编辑。我的回答是关于 assemble 的当前版本。如果您使用的是grunt-assemble，则应根据您的编辑内容做出另一个答案（我认为这对grunt-assemble 有意义）。

【解决方案2】：

这是一个疯狂的猜测（我从未使用过车把），但我认为这在 javascript 中是有意义的：

{{#each list}}
    {{'icon-' + this.color}}
    <span>{{val}}</span>
{{/each}}

【讨论】：