Nodejs 通过<%- partial('posts') %> 在posts.ejs 中获取不到posts参数？求解

Nodejs 通过<%- partial(‘posts’) %> 在posts.ejs 中获取不到posts参数？求解

res.render(‘user’, {
title : user.name,
posts : posts
});

在user.ejs 中<%- partial(‘posts’) %> 包含posts.ejs

在posts.ejs 中却获取不到posts 参数？为什么？各位大虾 求解…

<%= posts%> 为undefined


5 回复

在使用 EJS 模板引擎时，你可能会遇到在一个部分（partial）中无法直接访问父模板传递的变量的情况。这通常是因为局部变量的作用域问题。下面是一个解决方法的示例，展示如何确保 posts 变量在 posts.ejs 文件中可用。

示例代码

假设你有以下目录结构：

/views
    /partials
        posts.ejs
    user.ejs

user.ejs (主模板)

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <% include partials/posts %>
</body>
</html>

posts.ejs (部分模板)

<ul>
    <% posts.forEach(function(post) { %>
        <li><%= post.title %></li>
    <% }) %>
</ul>

Node.js 服务器端代码

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/user', function(req, res) {
    const user = {
        name: 'John Doe'
    };
    const posts = [
        { title: 'First Post' },
        { title: 'Second Post' }
    ];

    res.render('user', {
        title: user.name,
        posts: posts
    });
});

app.listen(3000, () => console.log('Server running on port 3000'));

解释

  1. 主模板 (user.ejs):

    • 使用 <%- include partials/posts %> 来包含 posts.ejs 部分。
    • 确保在 res.render('user', {...}) 中传递 posts 变量给主模板。

  2. 部分模板 (posts.ejs):

    • 使用 <% posts.forEach(function(post) { %> ... <% }) %> 来遍历 posts 数组并显示每个 post 的 title。

  3. Node.js 服务器端代码:

    • 设置 EJS 作为视图引擎。
    • 在处理 /user 路由时，将 posts 变量传递给 user.ejs 主模板。

通过这种方式，你可以确保 posts 变量在包含的部分模板中可用。如果你仍然遇到问题，请检查是否有拼写错误或路径问题。


partial 新版中依旧没有这个了貌似，看看文档去。那个书中的版本和现在的用法有区别呢

换为 partial(‘posts’, {posts:posts})

恩，可以了，真心感谢！

在使用 EJS 模板引擎时，如果你在父模板（如 user.ejs）中传递了一个对象给子模板（如 posts.ejs），但子模板中无法获取到这个对象，通常是因为变量作用域或者传递方式不正确。

你可以尝试以下几种方法来解决这个问题：

方法一：确保在父模板中正确传递数据

在父模板 user.ejs 中，确保你将 posts 数据传递给了子模板。你可以使用 locals 或者直接传递：

<%- partial('posts', { posts: posts }) %>

方法二：在子模板中正确接收数据

确保子模板 posts.ejs 正确地接收到传递的数据，并且使用正确的方式来访问它：

<%- posts.map(post => `<div>${post.title}</div>`).join('') %>

或者，如果你只是简单地遍历 posts 数组并显示每个 post 的信息：

<% posts.forEach(function(post) { %>
    <div><%= post.title %></div>
<% }) %>

示例代码

用户模板 (user.ejs)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <%- partial('posts', { posts: posts }) %>
</body>
</html>

帖子模板 (posts.ejs)

<% posts.forEach(function(post) { %>
    <div><%= post.title %></div>
<% }) %>

通过以上方法，你应该能够在子模板 posts.ejs 中正确获取到 posts 参数，并显示相应的内容。如果问题仍然存在，请检查是否有拼写错误或其他语法问题。

回到顶部