Handlebar.JS为指定键值条目渲染不同模板及添加分隔符的最优方案

核心思路 #

Handlebars的{{#each}}迭代块自带内置状态变量，可直接通过@last判断是否为列表最后一个元素、@index获取当前元素索引，无需复杂的自定义解析逻辑即可实现你要的「条目间加逗号、列表末尾加句号」的需求。 #

实现方案 #

第一步：修复原有模板笔误 #

你现有代码将按钮文本内容写在了<button>标签的属性位，没有闭合起始标签的>，先修正该问题后再添加分隔逻辑。

第二步：模板改造（无需额外Helper） #

直接使用内置变量实现分隔逻辑，同时兼容空列表场景，避免空列表输出多余句号：

{{#if items.length}}
  {{#each items}}
    <button class="accordion-button">
      {{#if (equals type "article")}}
        {{AUTHOR}} {{TITLE}} {{JOURNAL}} {{VOLUME}}({{NUMBER}})
      {{/if}}
      {{#if (equals type "book")}}
        {{AUTHOR}} {{EDITOR}} {{BOOKTITLE}}
      {{/if}}
    </button>
    {{#if @last}}.{{else}},{{/if}}
  {{/each}}
{{/if}}

可选：通用分隔符Helper（多场景复用） #

如果你多个页面都有类似的分隔需求，可以注册一个通用Helper，JS端注册代码如下：

Handlebars.registerHelper('listSeparator', function(currentIndex, listLength) {
  return currentIndex === listLength - 1 ? '.' : ',';
});

对应模板调用方式：

{{#if items.length}}
  {{#each items}}
    <button class="accordion-button">
      {{#if (equals type "article")}}
        {{AUTHOR}} {{TITLE}} {{JOURNAL}} {{VOLUME}}({{NUMBER}})
      {{/if}}
      {{#if (equals type "book")}}
        {{AUTHOR}} {{EDITOR}} {{BOOKTITLE}}
      {{/if}}
    </button>
    {{listSeparator @index ../items.length}}
  {{/each}}
{{/if}}

关于你提到的表达式遍历需求 #

不建议在模板层实现「提取if块内所有Handlebars表达式并遍历」的逻辑：Handlebars为轻逻辑模板，设计定位就是仅负责数据到视图的渲染，复杂的内容提取、解析操作应该在JS层处理完数据后再传入模板。你当前的需求不需要做该操作即可实现。

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