assemble - 如何在 assemble 中重用代码(html + Handlebars )来显示分类列表？

Question

我正在使用assemble

例如，如果我有以下数据:

   {"people": [
        {
            "name": "Sally",
            "group": "A"
        },
        {
            "name": "John",
            "group": "B"
        },
        {
            "name": "Jane",
            "group": "B"
        },
        {
            "name": "Skippy",
            "group": "A"
        }
    ]}

如何根据属性值(A 或 B)呈现两个单独的名称列表？

这是所需的 html 输出:

<p>Group A</p>
<ul>
    <li>Sally</li>
    <li>Skippy</li>
</ul>

<p>Group B</p>
<ul>
    <li>John</li>
    <li>Jane</li>
</ul>

目前，我的 Handlebars 模板代码如下所示。但是，我想避免一次又一次地复制相同的代码。

<p>Group A</p>
{{#each index.people }}
    {{#is group "A"}}
        {{ name }}: {{ group }}
    {{ /is }}
{{ /each }}

Answer 1

您当前使用的解决方案正是我推荐的:

{{#each people}}
  {{#is group "A"}}
    ....
  {{/is}}
{{/each}}

但是，您可以轻松创建一个 Handlebars 助手来完成您想做的任何事情。例如

Handlebars.registerHelper('people', function (context, group) {
  return context.filter(function (item) {
    if (item.group) {
      return item.group === group;
    }
    return false;
  });
});

现在，给出您的列表:

{
  "list": [
    {
      "name": "Sally",
      "group": "A"
    },
    {
      "name": "John",
      "group": "B"
    },
    {
      "name": "Jane",
      "group": "B"
    },
    {
      "name": "Skippy",
      "group": "A"
    }
  ]
}

你可以像这样使用助手:

{{people list 'A'}}
{{people list 'B'}}

有info on the assemble docs关于如何使用 assemble 注册助手。