如何从其他JS文件访问EJS文件中的变量

Question

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

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

home.ejs

<%= arrayFile %>

arrayFile.js

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

这会在home.ejs页面上提供结果[object Object]

我尝试制作home.ejs

<%= JSON.stringify(arrayFile) %>

结果{}

Answer 1

我认为您在混合上下文。 <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 。 这可能不是您想要的，因为这样实际上就不需要EJS中的<script src="arrayFile.js"></script> 。

如果要将文件和HTML和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>

然后，您的EJS中不需要<%= array %> 。

当然，您可以混合使用两种方式，使数组既可用于EJS，也可用于浏览器。