如何使用Mustache.js实现break-sort分组渲染效果

云上老周

2026-9-3

解答

Mustache.js 是无逻辑模板引擎，没有内置相邻行字段对比、跨条目状态追踪的能力，也不支持在模板内直接写自定义判断逻辑比较当前行和上一行的字段值。它自带的条件渲染只能判断当前上下文内的字段是否为真值，根本访问不到上一条数据的内容，没法直接实现你说的“字段值变化才渲染分组块”的逻辑。

你的数据已经提前按group字段排好序了，完全没必要硬在模板层凑逻辑——Mustache的设计原则就是把业务逻辑放在数据准备阶段，模板只负责纯渲染，提前把扁平数据做一次分组聚合就能轻松实现需求，这也是官方推荐的做法。

实现方法

先把原始的扁平列表预处理成分组嵌套结构，同组的条目归到同一个分组节点下，处理后的数据结构如下：

const renderData = {
  groups: [
    {
      group: 'stars',
      rows: [
        {name: 'George', rating: '5'},
        {name: 'Tom', rating: '3'}
      ]
    },
    {
      group: 'singers',
      rows: [
        {name: 'Tanya', rating: '5'},
        {name: 'Fred', rating: '4'}
      ]
    }
  ]
}

再写对应的Mustache模板，用内置的列表遍历能力，先循环分组渲染分组标题行，再循环分组下的条目渲染数据行即可：

+----------------------+
|     NAME    | Rating |
+----------------------+
{{#groups}}
|         {{group}}        |
+----------------------+
{{#rows}}
| {{name}}      |   {{rating}}    |
+----------------------+
{{/rows}}
{{/groups}}

渲染出来的效果和你预期的表格格式完全一致。