如何在Handlebars.js中移除UL标签内多余的LI标签

你的问题根源很明确：模板里多写了一层<li>，而自定义助手又生成了完整的<li>列表项，两者叠加就导致了嵌套的<li>结构。

方案1：修改模板（最直接） #

把模板中外层的<li>移除，因为listConstruct助手已经负责生成每个列表项的<li>标签了：

原模板：

<ul><li>{{#listConstruct product}}{{this}}{{/listConstruct}}</li></ul>

修改后模板：

<ul>{{#listConstruct product}}{{this}}{{/listConstruct}}</ul>

这样助手返回的<li>Pen</li><li>Pencil</li><li>Notebook</li>会直接插入<ul>内部，输出结构就完全符合你的预期了。

方案2：弃用自定义助手，用Handlebars原生语法 #

其实Handlebars自带each块助手，完全可以替代你写的自定义助手，代码更简洁且易维护：

模板代码：

<ul>
  {{#each product}}
    <li>{{this}}</li>
  {{/each}}
</ul>

这种方式不需要额外注册助手，直接利用原生语法就能生成正确的列表结构，推荐优先使用。

额外说明 #

如果你坚持要保留自定义助手但不想改模板，也可以调整助手逻辑，让它只返回每个item的文本内容，而不包含<li>标签，然后模板里的<li>配合助手循环输出，但这种方式反而多此一举，不如上面两种方案高效。

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