HandlebarsJS自定义helper调用报data_array undefined解决方法

报错是因为模板里的属性访问路径写错了：在{{#each this.catalog_number}}循环块内，this指向的是catalog_number数组的单个元素，你写的this.data是当前元素上不存在的属性，传入helper的参数实际是undefined，后续在helper里读取undefined.CATALOG_NUMBER就触发了类型错误。
另外你注册helper时用了箭头函数，会导致Handlebars的上下文绑定失效，也是潜在的问题点。

修正模板代码 #

把传给show_data helper的参数从this.data改成当前循环项this，同时第一列直接读取当前项的CATALOG_NUMBER字段即可，不要直接输出整个对象：

<tbody>
    {{#each this.catalog_number}}
        <tr>
            <td>
                {{ this.CATALOG_NUMBER }}
            </td>               
            {{#each (show_data this) }}
                <td>
                    {{ this }}
                </td>
            {{/each}}
        </tr>
    {{/each}}
</tbody> 

修正自定义helper #

不要用箭头函数注册helper，同时调整返回值为你需要渲染成表格单元格的属性值数组：

Handlebars.registerHelper("show_data", function(dataItem) {
    // 按你实际需要展示的列，把对应字段的值按顺序放进数组返回即可
    return [
        dataItem.attr1,
        dataItem.attr2,
        dataItem.attr3
        // 补充你需要的其他字段
    ];
});

更简单的无helper实现 #

如果你的表格列是固定的，完全不需要自定义helper，直接在模板里按顺序输出对应字段就行，性能更好也更易维护：

<tbody>
    {{#each this.catalog_number}}
        <tr>
            <td>{{this.CATALOG_NUMBER}}</td>
            <td>{{this.attr1}}</td>
            <td>{{this.attr2}}</td>
            <td>{{this.attr3}}</td>
            <!-- 按需补充列 -->
        </tr>
    {{/each}}
</tbody>

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