Handlebars #each语法使用问题：{{#foods}}代码块无法正常运行求助

你的代码存在三个关键问题，直接导致{{#foods}}块无法工作，以下是问题说明和修复方案：

问题分析 #

• 嵌套上下文访问错误：在{{#meal}}循环内部，当前上下文是单个meal对象，直接调用{{#foods}}会因找不到该属性失效，必须明确指定访问根上下文的foods。
• 循环内属性调用错误：进入foods循环后，当前上下文已是单个食物对象，无需通过foods.name调用，直接写{{name}}即可。
• 外层属性访问错误：在foods循环内访问外层meal的id，需要用../id获取上层上下文属性，而非meal.id。

修复后的代码 #

<div class="container">
    <div class="options">
        {{#meal}}
            <h3>Select the food you want to add to {{name}}</h3>
            <div class="options-items">
                {{#each ../foods}}
                    <a class="test" href="http://localhost:8000/dashboard/add/{{../id}}">
                        {{name}}
                    </a>
                {{/each}}
            </div>
        {{/meal}}
    </div>
</div>

补充说明 #

• 若你的Handlebars版本为3.0及以上，也可用@root.foods替代../foods，写法更直观：{{#each @root.foods}}，此时访问外层meal的id仍需用../id。
• 确认上下文数据结构无误，meal和foods均为数组类型，Handlebars的{{#each}}（或简写的{{#数组名}}）仅能遍历数组。

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