如何在靜態JavaScript中嵌入EJS代碼？

我正在使用Nodejs和ExpressJS。如何在靜態JavaScript中嵌入EJS代碼？

我有一個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文件（以便它的渲染正確且動態？）

如果還有其他方法可以實現此目的，請讓我知道。

來源

2013-08-24 geeky_monster

也許最簡單的辦法是輸出從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中看到這個例子。

來源

2013-08-24 00:48:46

我通常爲此使用一個客戶端變量...'clientData = JSON.stringify（{table：table}）;'對於任何意圖暴露給客戶端的東西..朝着我的html頂部，頭......然後它可用...在.Net中我將使用HttpContext.Current.Items ['__ClientData__']來存儲動態對象並將其公開...在Node中，它通常對模型顯式。 – Tracker1

@Jonathan Lonowski - 非常感謝。相當具有描述性。 –

如何在靜態JavaScript中嵌入EJS代碼？

回答

相關問題