Handlebars拆分逗号分隔字符串并在{{#each}}内遍历渲染方案

直接对flavor_profiles字段使用{{#each}}遍历无效，是因为Handlebars内置的each助手仅支持遍历数组、对象类型数据，而第三方返回的该字段是逗号拼接的字符串，直接遍历会把整串内容当成单个元素处理。之前尝试自定义Helper未生效，基本是因为Helper注册时机错误，放在了模板编译步骤之后。

两种方案均不需要修改第三方源数据、不引入额外框架、不需要服务端处理，按需选择即可。

方案1：注册自定义Handlebars Helper（推荐，模板逻辑更聚合） #

第一步：在编译模板之前注册自定义拆分遍历Helper，修改script.js代码如下：

$(document).ready(function () {
    // 注意：Helper必须在Handlebars.compile之前注册，否则无法识别
    Handlebars.registerHelper('splitAndEach', function(str, delimiter, options) {
        // 空值兜底，避免无该字段时渲染报错
        if (!str) return '';
        const itemList = str.split(delimiter);
        let renderResult = '';
        itemList.forEach(item => {
            // trim处理掉逗号前后可能存在的多余空格
            renderResult += options.fn(item.trim());
        });
        return renderResult;
    });

    var request = new XMLHttpRequest();
    request.open("GET", "testdata.json", false);
    request.send(null);
    var data = JSON.parse(request.responseText);
    
    var source = $("#checkin-template").html();
    var template = Handlebars.compile(source);
    $('.output').append(template(data));
});

第二步：修改模板中标签列表部分的代码，替换原有单个li结构：

<ul class="tags">
    {{#splitAndEach flavor_profiles ","}}
    <li><a href="#" class="tag">{{this}}</a></li>
    {{/splitAndEach}}
</ul>

方案2：渲染前预处理数据（无需写Helper，逻辑更直白） #

如果不想自定义Helper，可以在拿到JSON数据后、传入模板前，先把每条数据的flavor_profiles字段拆成数组，修改script.js代码如下：

$(document).ready(function () {
    var request = new XMLHttpRequest();
    request.open("GET", "testdata.json", false);
    request.send(null);
    var data = JSON.parse(request.responseText);
    
    // 预处理数据：将逗号分隔字符串转为数组
    data.forEach(record => {
        if (record.flavor_profiles) {
            record.flavor_profiles = record.flavor_profiles.split(',').map(item => item.trim());
        } else {
            record.flavor_profiles = []; // 空值兜底
        }
    });

    var source = $("#checkin-template").html();
    var template = Handlebars.compile(source);
    $('.output').append(template(data));
});

模板部分直接用内置each遍历即可：

<ul class="tags">
    {{#each flavor_profiles}}
    <li><a href="#" class="tag">{{this}}</a></li>
    {{/each}}
</ul>

• 拆分逻辑中增加trim()处理，是为了兼容第三方返回数据中逗号前后带多余空格的场景，避免渲染出的风味文本前后带空白字符
• 增加空值兜底逻辑，是为了避免单条数据缺失flavor_profiles字段时，执行字符串拆分报错导致整个列表渲染失败
• 同步注意模板中原有h1标签未闭合的问题，现有代码里<h1>{{venue_country}}<h2>需要将h2改为闭合h1标签，避免HTML结构错乱

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