如何基于Elixir/Erlang的bbmustache创建动态内容HTML模板？

核心思路 #

bbmustache支持数组遍历的区块语法，不需要预先固定表格行数，直接通过遍历JSON中的数据数组动态生成对应数量的表格行，完全匹配数据条数。

1. HTML模板编写 #

使用{{#数组名}}...{{/数组名}}循环渲染表格行，模板仅定义单一行的结构，循环逻辑由bbmustache处理：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态表格示例</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h2>动态生成的表格</h2>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>值</th>
            </tr>
        </thead>
        <tbody>
            {{#rows}}
            <tr>
                <td>{{index}}</td>
                <td>{{name}}</td>
                <td>{{value}}</td>
            </tr>
            {{/rows}}
            {{^rows}}
            <tr>
                <td colspan="3">暂无数据</td>
            </tr>
            {{/rows}}
        </tbody>
    </table>
</body>
</html>

• {{#rows}}...{{/rows}}：当rows数组非空时，循环渲染内部表格行，每次循环自动绑定数组当前元素的字段。
• {{^rows}}...{{/rows}}：反区块语法，当rows数组为空或不存在时，渲染空数据提示。

2. JSON数据结构 #

将表格行数据组织成数组，数量可任意调整（2行、3行、4行均可）：

{
  "rows": [
    {"index": 1, "name": "项目A", "value": "100"},
    {"index": 2, "name": "项目B", "value": "200"},
    {"index": 3, "name": "项目C", "value": "300"}
  ]
}

若仅需2行数据，保留前两个对象即可；无数据时，将rows设为空数组[]，模板会自动显示空数据提示。

3. Elixir环境下的渲染代码 #

假设已通过Mix.install([:bbmustache, :jason])安装依赖，示例代码：

defmodule DynamicTableRenderer do
  def render do
    # 读取模板文件
    template = File.read!("table_template.html")
    # 读取并解析JSON数据
    json_data = File.read!("table_data.json") |> Jason.decode!()
    # 渲染模板
    bbmustache.render(template, json_data)
  end
end

# 执行渲染并输出结果
IO.puts(DynamicTableRenderer.render())

Erlang环境逻辑类似，使用bbmustache:render/2函数，将JSON解析为Erlang map或proplist传入即可。

关键说明 #

• 核心是通过数组循环动态生成行，而非预先固定行数，完全匹配数据条数。
• bbmustache会自动处理数组长度，无需额外编写判断逻辑。

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