如何在Handlebars模板调用partial时传递唯一递增值实现全局唯一行索引

我明白你的痛点——默认的@index只在当前each块内有效，你之前写的increment helper因为没有持久化状态，没法在多个partial之间累计计数。下面给你两种可行的解决方案：

方案1：使用全局计数器（简单直接） #

这种方式适合单页面单模板渲染的场景，通过维护一个全局变量来累计索引：

首先在注册helper前初始化全局计数器：

// 初始化全局行索引计数器，每次渲染新模板前记得重置
let globalRowCounter = 0;

Handlebars.registerHelper('globalIndex', function() {
  // 每次调用先递增再返回，确保索引从1开始
  globalRowCounter++;
  return globalRowCounter;
});

然后修改你的table partial，直接调用这个helper：

<!-- table partial 代码 -->
<table>
  {{#each tableData}}
    <tr>
      <td>{{globalIndex}}</td>
      <td>{{this.name}}</td>
    </tr>
  {{/each}}
</table>

调用partial的时候不需要再传cardinal参数了：

{{> table tableData=table1}}
{{> table tableData=table2}}

⚠️ 注意：如果需要多次渲染模板，每次渲染前一定要重置计数器：globalRowCounter = 0;，避免索引混乱。

方案2：通过上下文传递计数器（更安全可控） #

如果担心全局变量的污染问题，可以把计数器放到渲染上下文里，利用对象引用的特性来维护状态：

首先注册一个操作上下文计数器的helper：

Handlebars.registerHelper('getNextIndex', function() {
  // 递增上下文里的rowCounter并返回
  this.rowCounter++;
  return this.rowCounter;
});

准备渲染上下文时初始化计数器：

const renderContext = {
  table1: [{name: 'ABC'}, {name: 'XYZ'}],
  table2: [{name: 'ABC'}, {name: 'XYZ'}],
  rowCounter: 0 // 初始化计数器
};

修改table partial使用这个helper：

<!-- table partial 代码 -->
<table>
  {{#each tableData}}
    <tr>
      <td>{{getNextIndex}}</td>
      <td>{{this.name}}</td>
    </tr>
  {{/each}}
</table>

调用partial的方式不变，不需要额外传参数：

{{> table tableData=table1}}
{{> table tableData=table2}}

这种方式的好处是计数器属于当前渲染上下文，不会和其他渲染任务冲突，每次渲染新的模板时只要在上下文里初始化rowCounter即可。

两种方案都能实现你要的效果：表格1的行索引是1、2，表格2的是3、4，完全跨表格连续唯一。

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