如何在Mustache模板中按日期对预订列表项分组？

原始预订数据 #

[
  {
    Date: { S: '2024-04-10' },
    BookingID: { N: '3' },
    Room: { S: 'Pod1' }
  },
  {
    Date: { S: '2024-04-10' },
    BookingID: { N: '5' },
    Room: { S: 'Pod2' }
  },
  {
    Date: { S: '2024-05-13' },
    BookingID: { N: '2' },
    Room: { S: 'Pod3' }
  }
]

当前使用的Mustache遍历代码 #

{{#bookings}}
  <p>Date: {{date}}
  <p>ID: {{id}}
  <p>Room: {{room}}
{{/bookings}}

问题 #

现在已经能遍历展示所有预订，但不知道怎么按日期把同天的预订归到一组，请问Mustache模板要怎么写？必须用脚本处理吗？

解决方案：必须借助脚本预处理数据 #

Mustache是无逻辑模板引擎，本身不支持分组、排序这类数据处理操作，只能先通过脚本把原始数据转换成按日期分组好的结构，再传给模板渲染。

1. 用JavaScript预处理数据示例

先把原始数据整理成按日期分组的结构，同时把嵌套的字段（比如Date.S）扁平化，方便模板调用：

// 原始数据（假设已解析为JS对象数组）
const rawBookings = [
  { Date: { S: '2024-04-10' }, BookingID: { N: '3' }, Room: { S: 'Pod1' } },
  { Date: { S: '2024-04-10' }, BookingID: { N: '5' }, Room: { S: 'Pod2' } },
  { Date: { S: '2024-05-13' }, BookingID: { N: '2' }, Room: { S: 'Pod3' } }
];

// 按日期分组并扁平化字段
const groupedData = rawBookings.reduce((result, item) => {
  const date = item.Date.S;
  const booking = {
    id: item.BookingID.N,
    room: item.Room.S
  };
  if (!result[date]) {
    result[date] = [];
  }
  result[date].push(booking);
  return result;
}, {});

// 转成模板易处理的数组格式
const templateData = {
  dateGroups: Object.entries(groupedData).map(([date, bookings]) => ({
    date,
    bookings
  }))
};

处理后templateData的结构是这样的：

{
  dateGroups: [
    {
      date: '2024-04-10',
      bookings: [
        { id: '3', room: 'Pod1' },
        { id: '5', room: 'Pod2' }
      ]
    },
    {
      date: '2024-05-13',
      bookings: [
        { id: '2', room: 'Pod3' }
      ]
    }
  ]
}

2. 对应的Mustache模板

现在就可以先遍历日期分组，再遍历每组内的预订项：

{{#dateGroups}}
  <h3>日期：{{date}}</h3>
  <div class="booking-group">
    {{#bookings}}
      <p>预订ID：{{id}} | 房间：{{room}}</p>
    {{/bookings}}
  </div>
{{/dateGroups}}

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