将JavaScript中的变量传递到EJS模板

Question

我希望在ejs文件中使用一个在javascript文件中声明的变量。

javascript:

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

var myVar = 1;

在ejs文件中，如果我想在几个if语句中使用该变量，则必须再次声明它才能使用。

ejs文件：

var myVar = 1;
if ( my Var ) ....

我该如何避免这种情况？或者有没有一种方法可以创建一个配置文件，使其可以从JavaScript和EJS文件中访问？

我也尝试使用：

app.locals.myVar = 1

但在EJS文件中未定义。

-------更新--------------------------

在我的代码中，我正在使用：

app.get('/', function (req, res) {
    res.render('index', { user : req.user, message: [] });

});

使用 app.locals 后:

app.get('/', function (req, res) {

   res.render('index', { user : req.user, message: [] });
   res.render('user_info.ejs');

});

即使代码运行良好，我仍然收到如下信息：

ReferenceError: ....user_info.ejs:18

 >> 18|            height:60px;


user is not defined
    at eval (eval at <anonymous> (...node_modules/ejs/lib/ejs.js:464:12), <anonymous>:20:12)

    at returnedFn (...node_modules/ejs/lib/ejs.js:493:17)
    at View.exports.renderFile [as engine] (.../node_modules/ejs/lib/ejs.js:350:31)
   .....

这没有意义，因为我说代码运行良好。如果我运行它而没有添加第二个res.render('user_info.ejs)，我就不会收到任何错误信息。 那么，我可以有两个res.render语句吗？

- George

---

app.locals.myVar 应该可以正常工作，前提是您在正确的位置设置它并在模板中正确使用它。您可能需要发布更多的代码。 - robertklep

JS不会在文件之间“传递”变量。相反，所有文件都在全局上下文中加载和运行（在浏览器中是窗口）。 - evolutionxbox

@HiteshKumar 你如何从服务器端将它添加到 window 对象中？这不是 EJS 模板的工作方式。 - Dave Newton

在Node中，你有一个名为“global”的变量，而不是“window”。但是，就像你不会在客户端将数据附加到“window”对象一样，在服务器端也不应该将数据附加到“global”对象。 - m-a-r-c-e-l-i-n-o

@George 在下面发布了一个可持续的解决方案 - 没有全局变量。 - m-a-r-c-e-l-i-n-o

Answer 1

使用 app.locals.myVar 的方法应该是可行的，因此一定有一些东西在阻碍它。但你可以完全避免使用 app.locals.myVar 并通过以下方式直接向视图 传递 变量：

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

app.get('/', function(req, res) {
    var myVar = 1;
    res.render('testPage', { myVar : myVar });
});

myVar 变量现在应该可以在 "testPage" ejs 文件中使用。在其中，你可以进行以下操作：

<%= myVar %>

并查看它输出“1”。

最后，请确保已将视图引擎设置为ejs：

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

否则它将无法工作。

- m-a-r-c-e-l-i-n-o

Answer 2

以下是一个非常简单的示例，说明如何使用app.locals将变量暴露给(EJS)模板:

// app.js
var express = require('express');
var app     = express();
var server  = app.listen(3000);

app.locals.myVar = 1;

app.get('/', function(req, res) {
  res.render('index.ejs');
});

// views/index.ejs
<% if (myVar) { %>
  <h1>myVar is here!</h1>
<% } else { %>
  <h1>Boohiss no myVar!</h1>
<% } %>

- robertklep

---

嗯...我可以问一下，如果我也有 res.render('index', { user : req.user, message: [] });，我该如何正确编写 'index.ejs'？我的意思是，我正在尝试：`app.get('/', function (req, res) {res.render('index', { user : req.user, message: [] }); res.render('index.ejs');});`但它在 index.ejs 中给我一些奇怪的引用错误，尽管它运行正常。 - George

很抱歉要坚持不懈地问。简单来说，我在app.get('/')中有两个res.render语句。尽管它可以工作，但会出现上述的引用错误。您能否让我知道这是否可能？谢谢。 - George

@George 或许可以为此创建一个新问题吗？或者你遇到的错误与之前相同吗？如果是这样，能否将您得到的确切错误添加到原始问题中？ - robertklep

@George 首先：调用 res.render() 两次是 不会 生效的。其次，我猜测 req.user 没有被定义，这将导致模板内的 user 变量未定义。这可能指向你的应用程序存在与身份验证相关的问题，而不是模板化。 - robertklep

但是如果我在没有 res.render('user_info.ejs') 的情况下运行它，关于 req.user 我就不会收到任何绝对的错误。有没有一种方法可以在不将其放入渲染中使用 app.locals.myVar？ - George

Answer 3

以下代码对我有效：

在 app.js 内部：

app.locals.myVar = myVar;

在 home.ejs 内部

<%= myVar %>

- Kamran Riyaz