Node.js: 使用模版引擎 Handlebars

10 Aug 2015

使用 Handlebars 作為模版引擎。

備註：由於部落格會把花括號吃掉，因此在左右加一個點，例如「.{.{ }.}.」。

基本設定

app.js 設定如下

var handlebars = require('express3-handlebars').create({ defaultLayout: 'main' }); // 引用 Handlebars 模組
app.engine('handlebars', handlebars.engine); // 使用 Handlebars 作為模版引擎
app.set('view engine', 'handlebars'); // 設定辨識用的副檔名，假設沒有設定副檔名，之後 render view 都要使用「檔名.副檔名」

Layout

Layout 一般會放在 views > layouts 資料夾裡面。主要 Layout 的檔案為 main.handlebars。

兩個大括號「.{.{ }.}.」用來套版，代入資料。
三個大括號「.{.{.{ }.}.}.」用來關閉 HTML 轉義功能。
使用.{.{.{ body }.}.}.將 view 載入。

語法可參考官方網站。

<!DOCTYPE html>
<html>
  <head>
    <title>.{.{ title }.}.</title>
    <meta charset="utf-8" />
  </head>
  <body>
    .{.{.{ body }.}.}.
  </body>
</html>

View

使用 index.handlebars。我們在首頁（index.handlebars）載入這段 partial 程式碼，程式碼如下。

<!-- index.handlebars -->
.{.{> weather }.}.

Partial

Partial View 一般會放在 views > partials 資料夾裡面。建立 weather.handlebars，並將資料代入，資料範例如下。

<!-- weather.handlebars -->
<div class="weatherWidget">
  .{.{# each partials.weather.locations }.}.
  <div class="location">
    <h3>.{.{ name }.}.</h3>
    <a href=".{.{ forcastUrl }.}.">
      <img src=".{.{ iconUrl }.}." alt=".{.{ weather }.}." />
      .{.{ weather }.}., .{.{ temp }.}.
    </a>
  </div>
  .{.{/ each }.}.
</div>

加上假資料。

function getWeatherData() {
  return {
    locations: [
      {
        name: 'Portland',
        forecastUrl: 'http://sample.com.tw',
        iconUrl: 'http://dummyimage.com/50x50/000/fff',
        weather: 'Overcast',
        temp: '54.1 F (12.3 C)',
      },
      {
        name: 'Bend',
        forecastUrl: 'http://sample.com.tw',
        iconUrl: 'http://dummyimage.com/50x50/000/fff',
        weather: 'Partly Cloudly',
        temp: '54.1 F (12.3 C)',
      },
    ],
  };
}

Router

router.get('/', function(req, res, next) {
  if (!res.locals.partials) {
    res.locals.partials = {};
  }
  res.locals.partials.weather = getWeatherData(); // get mock data
  res.render('index', { title: 'This is index page.' }); // get index page
});