Handlebars的each循环遍历cards数组失效 其余对象属性均可正常渲染

问题根因 #

你的场景存在两层模板解析逻辑：第一层是后端服务端模板引擎（和Handlebars语法一致，同样使用{{}}作为占位符标识）先渲染页面结构，第二层才是前端引入的Handlebars解析你写的模板脚本。
你之前给\{{title}}加反斜杠的作用就是告诉服务端模板引擎：这个占位符不要解析，原封不动输出到前端页面，留给前端的Handlebars处理。而你写的{{#each cards}}、{{/each}}没有加反斜杠，会被服务端模板引擎提前识别为自身的指令，服务端当前上下文没有cards变量，所以整个循环块会被服务端直接清空，前端拿到的script模板里根本不存在each循环逻辑，自然不会生效。
你尝试给each加反斜杠报错，是因为只转义了块级指令的开头，没有同步转义结尾指令，语法不合法导致的。

解决方法 #

将所有属于前端Handlebars的占位符、块级指令全部统一加反斜杠转义，循环内的数组项使用this指代即可：

<script id="pack-modal" type="text/x-handlebars-template">
<div class="modal" id="modal">
    <div class="modal-header">
        <div class="title">\{{title}}</div>
    </div>
    <div class="pack-modal-body">
        <label for="description" class="description-label">Description (optional):</label>
        <textarea name="description" class="pack-description"></textarea>
        <div style="height: 500px;">
        \{{#each cards}}
        <h1>\{{this}}</h1>
        \{{/each}}
        </div>
    </div>
</div>
<div id="overlay"></div>
</script>

验证方式 #

修改后打开浏览器开发者工具，直接查看页面内pack-modal脚本的内容，确认\{{#each cards}}相关代码完整存在，没有被服务端过滤即可。

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