Express template engine - Handlebars 功能


Posted by mijouhsieh on 2023-04-09

使用 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 中的所有的電影都顯示出來。


Q: 有哪些語法工具也可以被類似的方法使用!


#Handlebars #template-engine #Express







Related Posts

propTypes、以 state 為中心去思考

propTypes、以 state 為中心去思考

【THM Walkthrough】Breaching Active Directory

【THM Walkthrough】Breaching Active Directory

TypeScript 筆記:never 簡介

TypeScript 筆記:never 簡介


Comments