在前端开发中，我们经常需要通过模板引擎来渲染列表。对于这种情况，我们通常使用 Handlebars.js 来处理模板渲染。其中，我们可能会遇到一些问题，例如如何在 {{#each}} 循环中为元素添加分隔符，但不在最后一个元素后添加。
解决方案
方法1：使用 CSS 伪类
我们可以使用 CSS 中的伪类 :not(:last-child) 来选择所有不是最后一个子元素的元素，并在其后添加分隔符。
HTML：
<ul class="list">
{{#each items}}
<li>{{this}}</li>
{{/each}}
</ul>CSS：
.list li:not(:last-child)::after {
content: ", ";
}此方法简单易行，只需要少量的 CSS 即可轻松解决问题。但是，它可能会导致以下问题：
- 在最后一个元素后仍然会产生逗号。虽然不会影响页面显示，但这可能会影响一些程序员的完美主义。
- 当分隔符不是逗号时，例如短横线或竖线，这个方法就不能使用了。
方法2：使用 Handlebars Helper
我们可以编写一个 Handlebars Helper 来动态生成分隔符。这种方法可以解决在最后一个元素后添加分隔符的问题。
JavaScript：
-- -------------------- ---- -------
--------------------------------- --------------- -------- -
--- --------- - ----------------- -- -- --
--- ------ - ---
------- ---- --------------- ---- -
---- - -- ------ -- ----------
------ -- ---------------------
-
------ -------
---使用 Helper：
<ul class="list">
{{#join items separator=", "}}
<li>{{this}}</li>
{{/join}}
</ul>这种方法能够解决所有问题，但是需要编写一些 JavaScript 代码，稍微有点复杂。
总结
在 Handlebars.js 中，我们可以通过 CSS 伪类或者编写 Handlebars Helper 来为循环中的元素添加分隔符。使用哪种方法取决于你的具体需求。如果你只需要简单的逗号分隔符，并不关心最后一个元素的问题，那么使用 CSS 伪类就好了。但是如果你还需要更灵活的分隔符控制，那么编写 Handlebars Helper 是个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/605434cd8d846479e750ad6a