assemble - 如何在 assemble 中重用代码（html +车把）来显示分类列表？

Question

我正在使用汇编

例如，如果我有这些数据：

   {"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>

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

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

Answer 1

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

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

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

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'}}

assemble docs 上有关于如何使用 assemble 注册助手的信息。

Answer 2

你实际上有多少组？如果只有几个，我会重复{{#each people}}循环几次。如果不使用默认的 assemble/handlebars 方法重复标记，我不知道如何做到这一点。

如果您有很多组，我可能会编写一个助手来获取该数据并按组组织它，其中包含“人员”列表。如果您的数据结构如下：

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

您可以使用以下命令生成标记：

{{#each index.groups}}
    <p>Group: {{groupName}}</p>
    <ul>
        {{#each people}}
            <li>{{name}}</li>
        {{/each}}
    </ul>
{{/each}}