Question

我正在使用Nodejs和ExpressJS。

我有一个HTML页面，其中有一个Javascript文件被引用。

<script type="text/javascript" src="../javascripts/game.js"></script>

我没有将所有Javascript嵌入HTML页面本身，因为它太大了。

现在我需要我的Javascript（game.js）来访问控制器传递的一些变量。我想做这样的事情 -

var max_players = parseInt("<%= table.total_players %>");
console.log("<%= table.name %>")

我在渲染页面时传递了表变量。

 exports.index = function(req,res){

//code
res.render('mytable', {table: table });

    };

但是这显然不起作用，因为JS文件被渲染为静态文件。如果我需要让Javascript可以访问这些变量，我该怎么办呢？

我在某处读到这可以通过将Game.js重命名为Game.ejs来实现。但是我在哪里放置Game.js文件（以便正确动态地渲染？）

如果还有其他方法可以实现此目的，请告知我们。

Answer 1

可能最简单的选择是在table之前从另一个table <script>（或game.js本身）输出您需要的全局变量：

<script>
   var max_players = <%- JSON.stringify(table.total_players) %>;
   console.log(<%- JSON.stringify(table.name) %>);

   /* Alternative:
     var table = <%- JSON.stringify(table) %>;
     var max_players = table.total_players;
     console.log(table.name);
   */
</script>
<script type="text/javascript" src="../javascripts/game.js"></script>

请注意<%- ... %>与<%= ... %>的使用，它会跳过HTML编码输出，因为这会导致语法错误。

在这里使用JSON.stringify()利用了JSON和JavaScript之间的语法关系。这些值将写为JSON数据服务器端，但解析为JavaScript literals客户端。

如果您想通过EJS运行game.js，可以将其移至./views目录，为其添加路由，然后res.render()。

请注意，您需要设置Content-Type，因为假设值为text/html，某些浏览器可能会拒绝解析。

// ~/views/game-js.ejs

var max_players = <%- JSON.stringify(table.total_players) %>;
console.log(<%- JSON.stringify(table.name) %>);

// ...

app.get('/javascripts/game.js', function (req, res) {
    // code
    res.setHeader('Content-Type', 'application/javascript');
    res.render('game-js', { table: table });
});

另一种选择是让game.js向table提出请求。您可以在此帖子的a previous edit中看到此示例。

如何在静态Javascript中嵌入EJS代码？

1 个答案: