Jade 模板是一種可以創建高效的 HTML 模板的工具,它主要用于 Node.js 項目中。在開發 Node.js 項目時,通常會用到 JSON 數據。在這種情況下,Jade 模板可以幫助開發者更容易地將 JSON 數據呈現在網頁上。
var express = require('express');
var app = express();
// 將 JSON 數據賦值給變量
var customers = {
"customer1": {
"name": "Lily",
"email": "lily@email.com"
},
"customer2": {
"name": "Tom",
"email": "tom@email.com"
}
};
// 將數據傳遞到 Jade 模板引擎
app.get('/', function(req, res) {
res.render('index.jade', { customers: customers });
});
app.listen(3000);
在上述代碼中,我們定義了一個包含兩個客戶信息的 JSON 對象。然后在使用 Express 框架時,將該 JSON 對象賦值給變量customers
,并將其傳遞到 Jade 模板引擎的render()
方法中。
下面是在 Jade 模板中如何輕松呈現上述 JSON 數據:
html
head
title Example
body
h1 Customers
each val, index in customers
h2 Customer #{index}
p Name: #{val.name}
p Email: #{val.email}
在上述代碼中,我們使用了each
循環遍歷了customers
對象中的所有客戶信息。在每個循環中,我們使用val.name
和val.email
輸出了客戶的姓名和電子郵件地址。您可以將上述代碼拷貝到您的 Jade 模板文件中測試一下它的效果。