Node.js: 使用模版引擎 Handlebars

使用 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。

語法可參考官方網站

<!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
});

Demo

重新啟動專案,瀏覽器網址列輸入localhost:3000就會看到以下畫面:

Node.js - Handlebars


這篇文章的原始位置在這裡-Node - 使用模版引擎 Handlebars

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
標籤: node.js
comments powered by Disqus