如何在Node.js和Express中以嵌套形式呈现多个.ejs文件？

Question

如何在Node.js和Express中以嵌套形式呈现多个.ejs文件？

7

如何以嵌套形式渲染多个 .ejs 文件？

我有以下文件：

var mysql = require('mysql');
var ejs = require('ejs');
exports.index = function(req, res){
    if (req.method=='POST'){
        var connection = mysql.createConnection({user:'root', password:'root', database:'testdb'});
        var name = req.param('name');
        connection.query('select * from table_name where name = ?', name, function(err, rows, fields){
            if(err) throw err;
            res.render('index', {
                 title: 'title', content: res.render('index2', {data:rows})
            });
        });
    }
});

在 index.ejs 中，包含非常基本的html标签（例如html、head、body和一个p标签），并且其中有 <%- content %>，这里的content被认为是由另一个 .ejs 文件呈现，该文件不包括html、head或body标签，并且仅被认为是渲染内容和标题。然而，当我通过POST请求访问此文件并尝试呈现文件，然后从浏览器中查看输出的HTML文件时，内容仅包含index2.ejs文件，这意味着它没有html、body、head标签。

那么我错过了什么？如果我想通过 <script src='some_file.js'></script> 来包含Javascript库，那么在尝试在 index2.ejs 文件中呈现时，我应该添加另一个渲染属性...对吗？

- Blaszard

2个回答

4

更新：ejs-mate Express 4.x的局部布局。

https://www.npmjs.com/package/ejs-mate

cf 使用 EJS 模板化你的 Node 应用程序

- nico6

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- verybadalloc · Accepted Answer

首先，我认为你对res.render的操作方式感到困惑。根据docs的说明：

res.render(view, [locals], callback)

使用回调函数渲染视图并响应渲染后的字符串。

这就解释了为什么你在HTML页面中只看到了index2.ejs的内容。

现在，有多种方法可以实现您的目标，即将视图嵌套在视图中。从Express 3.x开始，您需要使用include。在这种情况下，您可以像这样重写您的视图：
1- 定义一个header.ejs文件，它看起来像这样example。
2- 定义一个footer.ejs文件，它看起来像这样example。
3- 在您的index2.ejs中，包含这两个文件，像这样：

<% include header %>
    //The HTML of your index2.ejs
    //You can add some reusable views, like, say, a submit button above the footer
    <% include reusable_views/submit %>
<% include footer %>

第二种方法是使用ejs-locals，它允许您通过指定其路径来插入任何视图：

res.render('index', {
                 title: 'title', 
                 content: 'index2', 
                 data:rows
            });

而在你的 index1.ejs 文件中，您会有：

<html><head>
<title><%= title %></title></head>
<body><p>
<%- partial('index2',{}) %>
</p></body></html>

这种方法的优点是您可以使用extra对象向视图传递额外的值。有关更多详细信息，请查看ejs-locals github页面。