如何用Handlebars按职位分组展示员工数组？是否可行？

当然可行！其实你离成功只差一步——先在JavaScript层面把员工数组按职位分组，因为Handlebars本身没有内置的分组助手，但我们可以先整理好数据结构，再用模板渲染就简单多了。

第一步：先处理你的原始数据 #

你需要把平铺的员工数组转换成「以职位为键，对应员工数组为值」的对象。写个简单的分组函数就行：

// 定义分组函数
function groupByPosition(employees) {
  return employees.reduce((groups, employee) => {
    const position = employee.position;
    // 如果当前职位还没在分组里，先创建空数组
    if (!groups[position]) {
      groups[position] = [];
    }
    // 把员工加入对应职位的数组
    groups[position].push(employee);
    return groups;
  }, {});
}

// 用你的员工数组调用函数，得到分组后的数据
const groupedEmployees = groupByPosition(employee);
// 把处理好的数据传入模板上下文
const context = { people: groupedEmployees };

如果想要输出的职位顺序和你示例里的（Head → instructor → TA）完全一致，可以稍微调整分组函数，指定顺序：

// 按你想要的顺序定义职位
const desiredOrder = ['head', 'instructor', 'TA'];
function groupByPosition(employees) {
  // 先创建符合顺序的空分组
  const groups = desiredOrder.reduce((acc, pos) => {
    acc[pos] = [];
    return acc;
  }, {});
  // 把员工分配到对应分组
  employees.forEach(employee => {
    if (groups[employee.position]) {
      groups[employee.position].push(employee);
    }
  });
  return groups;
}

第二步：修改Handlebars模板 #

现在你的people已经是分组后的对象了，用{{#each}}遍历对象时，@key就是职位名称，this就是该职位下的员工数组，模板可以这么写：

{{#each people}}
  <h2>{{@key}}</h2>
  <ul class="people_list">
    {{#each this}}
      <li id="{{name}}">{{name}}</li>
    {{/each}}
  </ul>
{{/each}}

为什么你之前的代码不行？ #

你之前传入模板的people还是原始的平铺员工数组，Handlebars遍历数组时，@key是数组的索引（0、1、2...），而不是职位名称，所以才会输出不对。只要先把数据转换成分组后的对象，问题就解决啦！

内容的提问来源于stack exchange，提问作者Ahmed