技术问询：点击注册按钮后布尔值变更，EJS视图未更新

问题根源 #

EJS是服务器端渲染模板，页面在服务器生成后发送到浏览器时已经是静态HTML。你前端JS里修改的isRegister变量，和EJS模板中判断用的this.isRegister完全不是同一个——模板里的变量是服务器渲染时的临时变量，页面加载完成后就失效了。所以即便控制台显示前端变量已变更，也不会触发EJS模板重新渲染，视图自然不会更新。

解决方案 #

根据需求选择以下两种方案：

方案1：前端DOM切换（无需服务器交互）

把登录和注册框都渲染到页面，通过JS控制DOM的显示/隐藏实现视图切换：

1. 修改index.ejs，同时渲染两个盒子并默认隐藏注册框：

<%- include('partials/header') -%>

<% if (locals.isAuthenticated) { %>
    <p>You are logged in. <a href="/profile" class="underline">View your profile</a>.</p>
<% } else { %>
    <div id="loginBox">
        <%- include('partials/loginbox') -%>
    </div>
    <div id="registerBox" style="display: none;">
        <%- include('partials/registerbox') -%>
    </div>
<% } %>

<%- include('partials/footer') -%>

2. 修改footer.ejs中的脚本，直接操作DOM切换显示状态：

<script>
function register() {
    const loginBox = document.getElementById('loginBox');
    const registerBox = document.getElementById('registerBox');
    
    // 切换两个盒子的显示状态
    loginBox.style.display = loginBox.style.display === 'none' ? 'block' : 'none';
    registerBox.style.display = registerBox.style.display === 'block' ? 'none' : 'block';
}
</script>

方案2：后端路由跳转（需要服务器参与）

如果注册流程需要服务器处理，或者希望通过页面重新渲染实现切换，可以让按钮跳转至注册路由，由后端传递isRegister变量：

1. 修改loginbox.ejs中的按钮，改为跳转路由：

<button type="button" class="btn btn-primary" onclick="window.location.href='/register'">Register</button>

2. 在后端（以Express为例）添加路由，渲染对应状态的页面：

// 首页默认显示登录框
app.get('/', (req, res) => {
    res.render('index', { isRegister: false, isAuthenticated: false });
});

// 注册页显示注册框
app.get('/register', (req, res) => {
    res.render('index', { isRegister: true, isAuthenticated: false });
});

内容的提问来源于stack exchange，提问作者S-Grace