如何生成不同车把零件的列表？

Question

我正在使用 handlebars.js 和 assemble。

我有一个部分列表（svgs）：图标-blue.hbs、图标-red.hbs、图标-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}}

有什么办法吗？或任何其他方式来达到预期的结果？

Answer 1

这是一个大胆的猜测（我从未使用过车把），但我认为这在 javascript:

中是有意义的

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

Answer 2

在 handlebars 中，您需要使用助手来连接或连接变量。

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

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

然后您可以使用内置的部分助手和车把 subexpressions:

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

如何生成不同车把零件的列表？

How to generate a list of different handlebars partials?

html

arrays

handlebars.js

assemble