Meteor中Spacebars如何获取数组索引？动态序号显示失败求助

看起来你是在循环渲染表格行时想显示从1开始的连续序号，但{{@index}}和{{index}}没达到预期效果，我来帮你捋捋可能的问题和解决办法：

1. 先确认你是否在循环块内使用序号 #

首先要确保索引变量是写在循环指令的内部，比如你的模板应该是类似这样的结构：

<template name="getDynamic">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <td>序号</td> <!-- 新增序号列 -->
        <td>First Name</td>
        <td>last Name</td>
        <td>Email</td>
        <td>password</td>
        <td>Gender</td>
        <td>Trems</td>
        <td>Actions</td>
      </tr>
    </thead>
    <tbody>
      {{#each yourDataList}} <!-- 这里是循环开始 -->
      <tr>
        <td>{{@index + 1}}</td> <!-- 序号要写在each内部 -->
        <td>{{firstName}}</td>
        <td>{{lastName}}</td>
        <!-- 其他列内容 -->
      </tr>
      {{/each}}
    </tbody>
  </table>
</template>

如果把索引变量写在循环外面，肯定获取不到循环的索引值。

2. 处理索引从0开始的问题 #

大多数模板引擎（比如Handlebars、Meteor的Spacebars）里的@index都是从0开始计数的，直接用会显示0、1、2...，要得到1、2、3...需要做加1处理：

• 如果是Meteor的Spacebars：可以直接在模板里做简单运算，写{{@index + 1}}就可以生效。
• 如果是原生Handlebars：原生不支持模板内直接运算，需要注册一个自定义helper来实现加法：

  // 在你的JS代码里注册helper
  Handlebars.registerHelper('add', function(num1, num2) {
    return num1 + num2;
  });
  

  然后在模板里用{{add @index 1}}来显示序号。

3. 如果是其他模板引擎的情况 #

如果你的模板引擎不是Handlebars/Spacebars，比如Mustache（本身没有内置索引变量），那你需要在从数据库获取数据后，手动给每条数据添加一个序号字段，比如：

// 假设从数据库拿到的数组是dataList
const numberedData = dataList.map((item, index) => {
  return {
    ...item,
    serialNumber: index + 1
  };
});
// 然后把numberedData传给模板渲染

之后在模板里直接用{{serialNumber}}就能显示连续序号了。

排查小技巧 #

• 先在模板里直接输出{{@index}}看看有没有值，如果没输出，说明你可能没在循环块里，或者模板引擎不支持这个语法。
• 检查模板引擎的官方文档，确认它的循环索引变量是什么（比如有些引擎用{{loop.index}}而不是@index）。

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