EJS 中多层模板嵌套时正确传递变量的完整指南-js教程-PHP中文网

在 EJS 模板中，layout() 函数不支持直接传参；若需跨多级 partial（如页面 → 表单布局 → 页眉组件）传递变量（如 progress），必须统一使用 include() 并显式透传数据，避免 ReferenceError。

在 ejs 模板中，`layout()` 函数不支持直接传参；若需跨多级 partial（如页面 → 表单布局 → 页眉组件）传递变量（如 `progress`），必须统一使用 `include()` 并显式透传数据，避免 referenceerror。

EJS 的 layout() 是一个特殊辅助函数（常由 Express-EJS 中间件或 ejs-mate 等库提供），其设计初衷仅用于指定外层布局文件路径，不接受第二参数传入局部变量。因此，你在顶层使用时，{ progress: 10 } 实际被忽略，导致下层 formPartial.ejs 中无法访问 progress，进而引发 ReferenceError: progress is not defined。

✅ 正确做法：全程使用替代 layout() 实现可控的数据流透传。所有层级均需显式接收并向下传递所需变量。

✅ 推荐重构方案（三层嵌套示例）

1. 顶层页面（如 views/form/running-habits.ejs）
不再调用 layout()，改用 include() 引入表单布局，并传入 progress：


<div class="container pt-5">
    <div class="row">
        <div class="col">
            <h2>Running habits and goals</h2>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Get started by telling Fittir about your running habits and goals.</p>
        </div>
    </div>
</div>

<div class="container mt-auto">
    <div class="row">
        <div class="col">
            <p>Time to complete: 5 minutes</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Json Repair Kit" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit" class="overflowclass">Json Repair Kit</a>
													<p class="overflowclass">使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
        </div>
    </div>
</div>

2. 中间层布局（views/form/formPartial.ejs）
接收 progress，并继续透传给 formHeader 和 formFooter：

⚠️ 注意：body 是 Express-EJS 默认提供的变量（代表 res.render() 渲染的内容体），它本身不携带 progress，因此若需在 body 区域内使用 progress，也应在 res.render() 时一并传入（如 res.render('form/running-habits', { progress: 10 })），并在顶层模板中通过显式传递。

3. 底层组件（views/partials/formHeader.ejs）
安全使用 progress（已由上层传入）：

<header><div class="container">
        <div class="row">
            <div class="col">
                <a class="navbar-brand" href="/">@@##@@</a>
            </div>
            <div class="col">
                <div class="row">
                    <div class="progress mt-2 px-0">
                        <div class="progress-bar" role="progressbar" aria-valuenow="<%= progress %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= progress %>%">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col px-1">
                        <p>% completed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

? 关键注意事项

不要混用 layout() 和变量透传逻辑：layout() 是语义化布局钩子，非数据通道；依赖它传参是常见误区。
路径需准确：include() 路径基于当前文件位置，建议统一使用相对路径（如 ../partials/xxx.ejs）并确保文件存在。
变量作用域严格受限：EJS 中每个 include 创建独立作用域，父级变量不会自动继承，必须显式 { key: value } 传入。
调试技巧：可在任意 partial 开头添加快速验证变量是否到达。

✅ 总结

EJS 多层 partial 间传递变量的核心原则是：“谁需要，谁接收；谁使用，谁透传”。放弃对 layout() 的参数幻想，全面采用构建清晰、可维护、可调试的模板数据流。这样不仅能解决 progress is not defined 错误，也为后续扩展（如动态进度计算、国际化文案）打下坚实基础。