Handlebars列表构造问题：如何将自定义助手输出转为正确<li>列表结构

你当前的问题是把列表助手嵌套在了单个<li>标签内，导致所有数组元素都被塞进同一个<li>里。用Handlebars内置的{{#each}}助手就能直接解决这个问题，不需要自定义助手：

正确的模板代码 #

<ul style="list-style-type: square;">
  {{#each arrayItems}}
    <li>{{this}}</li>
  {{/each}}
</ul>

说明 #

• {{#each arrayItems}}会遍历你传入的arrayItems数组
• 每一次迭代都会生成一个独立的<li>标签，把当前数组元素{{this}}包裹进去
• 最终渲染出来的结构就是你需要的多个<li>嵌套在<ul>内的形式

如果一定要用自定义的orderedList助手（非必要），可以先注册这个助手：

Handlebars.registerHelper('orderedList', function(items, options) {
  let result = '';
  items.forEach(item => {
    result += options.fn(item);
  });
  return result;
});

然后模板这样写：

<ul style="list-style-type: square;">
  {{#orderedList arrayItems}}
    <li>{{this}}</li>
  {{/orderedList}}
</ul>

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