如何在EJS中跨多层级Partial传递变量？

问题核心是：你通过顶层页面的layout方法传递的变量，并没有直接暴露在中间层formPartial.ejs的本地作用域中，而是需要通过locals对象来访问。

具体修改方案 #

方案1：直接通过locals访问传递的变量

修改中间层级的formPartial.ejs，将传递变量的代码改为从locals对象中取值：

<% layout('layouts/form_boilerplate') %>

<form class="form" action="" method="POST">
    <%- include('../partials/formHeader', { progress: locals.progress }) %>

    <div class="form-body d-flex flex-column">
        <%- body %>

        <div class="container mt-auto">
            <%- include('../partials/formFooter') %>
        </div>
    </div>
</form>

方案2：提前解构locals变量（代码更简洁）

在formPartial.ejs开头先解构locals中的变量，后续就可以直接使用变量名：

<% layout('layouts/form_boilerplate') %>
<% const { progress } = locals; %>

<form class="form" action="" method="POST">
    <%- include('../partials/formHeader', { progress }) %>

    <div class="form-body d-flex flex-column">
        <%- body %>

        <div class="container mt-auto">
            <%- include('../partials/formFooter') %>
        </div>
    </div>
</form>

为什么会出现这个问题 #

EJS中通过layout方法传递的变量，会被统一存入locals全局对象中，而不是直接注入到模板的本地作用域。之前单层级传递没问题，是因为变量本身就在当前模板的作用域里，不需要跨layout层级读取。

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