如何用Mustache.js渲染二维矩阵？无法修改矩阵结构

没问题，我来帮你搞定这个事儿！因为你没法修改现有二维矩阵的结构，咱们直接用Mustache的数组遍历+索引访问的方式就能实现，完全不用改原数据。

核心思路 #

Mustache支持遍历数组，当你遍历外层的二维数组时，每个迭代项就是内部的子数组。咱们可以通过.来指代当前的子数组，再用索引（比如.[0]、.[1]）直接取出子数组里的元素，完美适配你的需求。

完整代码示例 #

1. HTML部分（模板+容器）

<!-- 先引入Mustache.js，记得换成你本地的文件路径哦 -->
<script src="mustache.min.js"></script>

<!-- 用来放渲染好的表格的容器 -->
<div id="diskTableContainer"></div>

<!-- Mustache模板，我帮你补全了表格结构 -->
<script id="tableTemplate" type="x-tmpl-mustache">
<table border="1">
  <thead>
    <tr>
      <th>型号系列</th>
      <th>品牌</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历你的二维矩阵，每个item就是子数组 -->
    {{#diskModels}}
    <tr>
      <!-- 用索引取子数组的第一个和第二个元素 -->
      <td>{{.[0]}}</td>
      <td>{{.[1]}}</td>
    </tr>
    {{/diskModels}}
  </tbody>
</table>
</script>

2. JavaScript部分（渲染逻辑）

// 你的原始二维矩阵数据
var DiskMakerModels = [
  [ "Blue", "WD" ],
  [ "Green", "WD" ],
  [ "Black", "WD" ],
  [ "Purple", "WD" ],
  [ "Red", "WD" ],
  [ "Red Pro", "WD" ],
  [ "Gold", "WD" ],
  [ "Barracuda", "Seagate" ],
  [ "Firecuda", "Seagate" ],
  [ "Ironwolf", "Seagate" ],
  [ "Skyhawk", "Seagate" ]
];

// 拿到模板内容
var templateContent = document.getElementById('tableTemplate').innerHTML;

// 渲染模板：把矩阵数据传给模板里的diskModels变量
var renderedHTML = Mustache.render(templateContent, { diskModels: DiskMakerModels });

// 把渲染好的内容放到容器里
document.getElementById('diskTableContainer').innerHTML = renderedHTML;

关键细节说明 #

• 如果你的模板原来写的是{{#rows}}这类变量名，只需要在渲染时把DiskMakerModels赋值给对应的变量就行，比如{ rows: DiskMakerModels }，模板里就用{{#rows}}遍历。
• {{.[0]}}的语法是Mustache访问数组元素的方式：.代表当前迭代的子数组，[0]就是取这个子数组的第一个元素，以此类推。

这样就能直接渲染出你想要的表格啦，完全不用改动原矩阵的结构~

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