使用 handlebars 作為樣板引擎的方便之處在於,它可以用 HTML 語法直接撰寫這支檔案,但又添加許多原本 HTML 沒有的功能。
功能 1: {{{ body }}}
app.js 檔案內 {{{ body }}} ,會把局部樣板的內容都放在這裡顯示。
功能 2: #each 建立迴圈
Handlebars 樣板中透過 #each 重複顯示多筆資料
app.js檔
app.get('/', (req, res) => {
const numberList = [1, 2, 3, 4, 5, 6, 7, 8]
// past the number list into 'index' partial template
res.render('index', { numbers: numberList })
})
index.handlebars檔
{{#each arrayName}}
<!-- do something with array here ... -->
{{/each}}
每次執行時從 #each 到 /each 之間,透過 this關鍵字取得當次元素的內容,也可使用原本的 HTML 語法搭配class和style屬性。
透過 #each 迴圈來處理多筆資料,可以讓程式碼變得精簡很多。只需將資料從 app.js 傳進來,接著在要變更內容的地方,使用 {{ }} 帶入變數,然後再用迴圈把 movies 中的所有的電影都顯示出來。