一尘不染

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

node.js

如何.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})
            });
        });
    }
});

where index.ejs由非常基本的html标记(例如html,head,body和一个p标记)组成并包含<%- content %>在其中,其中内容假定由另一个.ejs文件呈现,其中不包含html,head或body标记,仅假定呈现了内容和标题。但是,当我通过POST请求访问此文件并尝试呈现文件,然后从浏览器中签出输出的HTML文件时,内容仅包含index2.ejs文件,这意味着它没有html,body和head标记。

那我想念什么呢?而且,如果我想通过添加一个Javascript库<script src='some_file.js'></script>,当我尝试在index2.ejs文件中进行渲染时,是否应该添加另一个渲染属性…对吗?


阅读 366

收藏
2020-07-07

共1个答案

一尘不染

首先,我认为您对res.render操作方式感到困惑。根据文档

res.render(视图,[本地],回调)

使用回调响应渲染的字符串来渲染视图。

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


现在,有多种方法可以实现您的目标,即在视图中嵌套视图。从Express 3.x开始,您需要使用include。在这种情况下,您可以这样重写视图:
1-定义header.ejs文件,该文件类似于以下示例
2-定义一个footer.ejs。这看起来像另一个例子
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>

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

2020-07-07