如何將JSON包集成到Jade模板中？

我可能錯過了一些明顯的東西，但我對這個工作流程很陌生。我有一個快速應用程序設置，我使用Jade作爲模板引擎。我正在嘗試使用名爲「gulp-bundle-assets」的工具將所有腳本綁定到一個工具中，並使用名稱中的散列輸出它們（我假設爲避免緩存問題）。它還包含一個JSON文件，該文件應該用於將腳本集成到您的應用程序中。它看起來像這樣：如何將JSON包集成到Jade模板中？

{ 
    "main": { 
    "styles": "<link href='main-8e6d79da08.css' media='screen' rel='stylesheet' type='text/css'/>", 
    "scripts": "<script src='main-5f17cd21a6.js' type='text/javascript'></script>" 
    }, 
    "vendor": { 
    "scripts": "<script src='vendor-d66b96f539.js' type='text/javascript'></script>", 
    "styles": "<link href='vendor-23d5c9c6d1.css' media='screen' rel='stylesheet' type='text/css'/>" 
    } 
}

如何將這些數據包含在我的Jade模板中？我看到了一個用於編譯可變插值的Jade模板的實用程序，是處理它的最佳方式還是Jade中的本地內容？

來源

2016-05-22 amnesia

當您在NodeJS Express Server中使用JADE時，可能需要將數據發送到您的視圖。我認爲這是你需要的。由於您的數據是JSON格式，因此您需要使用JSON方法將其轉換爲JADE模板視圖的可讀格式。

下一個示例代碼嘗試：

var express = require('express'); 
var bodyParser = require('body-parser'); 
var path = require('path'); 

let port = process.env.PORT || 3030; 

var app = express(); 

app.set('views', path.join(__dirname, 'templates')); 
app.set('view engine', 'jade'); 

app.use(bodyParser.urlencoded({ extended: false })); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.get('/', function(req, res){ 
    let jsonFile = require('./public/jsondata.json'); 
    let jsonData = JSON.stringify(jsonFile); 
    let json = JSON.parse(jsonData); 
    let mStyles = json.main.styles; //You get your main styles 
    res.render('index', { mainStyles: mStyles }); 
}).listen(port, function(){ 
    console.log('Listening on' + port); 
});

，位於下一個內容templates文件夾JADE模板：

html(lang="en") 
    head 
     meta(charset="utf-8") 
     #{mainStyles} 
     title Hello World

你傳遞一個mainStyles VAR的JADE模板文件。

別忘了自定義您的JSON文件位置。

來源

2016-05-22 13:50:06 frankfullstack

這確實是我在找的，謝謝你的詳細解釋！ – amnesia

經過一番玩，我想要注意幾個更正：1）'require（'./ public/jsondata.json'）'行是所有需要的，不需要進行字符串化然後解析。 2）由於json數據（在本例中）包含完整標記，因此您希望使用'！{mainScripts}'而不是'＃{mainScripts}'來防止Jade轉義字符串。 – amnesia

謝謝，這是我得到的一個轉義問題，但我忘了指定'！{mainScript}'表達式。您還可以使用Jade中的'each'來循環您的自定義JSON對象。感謝您的更正。 – frankfullstack

如何將JSON包集成到Jade模板中？

回答

相關問題