时间戳

首页 > 解决方案 > 如何从不同的 JS 文件访问 EJS 文件中的变量

javascript - 如何从不同的 JS 文件访问 EJS 文件中的变量

问题描述

我正在构建一个简单的 Web 应用程序，它接受 3 种不同类型的输入并从视图目录（使用 Node 和 Express）呈现 3 个不同的 EJS 文件之一。每个呈现的 EJS 文件都需要静态数组的内容。静态数组很大，我想将它存储在一个单独的 JS 文件中。我尝试将此代码放入 EJS 文件中：

应用程序.js

var arrayFile = require('./arrayFile.js');

app.get("/", async function(req, res){
    let blockVariable = await request({
       method: "get",
       uri: "https://testardor.jelurida.com/nxt?requestType=getBlocks",
       json: true
    });

    var blocks2 = []
    blockVariable.blocks.forEach(function(element){
        if (element.transactions.length != 0){
            blocks2.push(element);
        }
    });

    res.render("home", {blocks: blockVariable.blocks,
                        blocks2: blocks2,
                        arrayFile: arrayFile
    });
});

主页.ejs

<%= arrayFile %>

数组文件.js

array = [{thing1: 1}, {thing2: 2}]

这会在 home.ejs 页面上给出结果 [object Object]

我试着制作 home.ejs

<%= JSON.stringify(arrayFile) %>

结果{}

标签： javascriptnode.jsexpress

解决方案

我认为您正在混合上下文。<script src="arrayFile.js"></script>将在浏览器端工作。虽然<%= array %>在服务器端工作。所以它应该是这样的，只是为了给你一个想法：

// assuming that your array is exported as default
var array = require('./arrayFile.js');
app.get('/page', (req, res) => {
  // make array available to EJS context
  res.render('page_ejs', {array});
});

但这可能会产生一个HTML带有印记的大数组。这可能不是您可能想要的，因为您实际上并不需要<script src="arrayFile.js"></script>EJS。

如果您想将文件发送到浏览器，您的HTMLand arrayFile.js，那么您必须正确导出数组，arrayFile.js以便您可以编写如下内容：

// this will be fetched by browser
<script src="arrayFile.js"></script>
// and then executed by browser
<script>
  console.log(yourArray);
</script>

然后你不需要<%= array %>在你的 EJS 中。

当然，您可以混合使用这两种方式，使数组对 EJS 和浏览器可用。

推荐阅读