Handlebars – config, składnia

Inicjalizacja silnika szablonów

const express = require('express')
const expressHandlebars = require('express-handlebars')

app.engine('handlebars', expressHandlebars({
  defaultLayout: 'main',
  extname: '.hbs'
}))

app.set('view engine', 'handlebars')  
app.set('view cache', true)                // def. ON prod / OFF dev mode

const port = process.env.PORT || 3000
app.use( express.static(__dirname + "/public") )

Layout domyślny /views/layauts/main.handlebars (.hbs)

Przesłanie zmiennej do szablonu /views/about.handlebars (.hbs)

app.get('/about', (req, res) => {
  res.render('about', { 
   name : fortune.getName(),             // przesłanie zmiennej   
   age  : '<b>25</b> years',             // przesłanie kodu HTML
   layout : null,                        // bez layout'u
   layout : 'my_layout'                  // własny layout
  })
})

Szablon /views/about.handlebars

<p>Nazywam się {{name}}  mam {{{age}}}</p>  - potrójne klamry nie zamieniają HTML na encje
{{! Komentarz}}

// Obiekt kontekstu przekazany do szablonu
{
  currency: {
    name: 'United States dollars',
    abbrev: 'USD',
  },
  tours: [
    { name: 'Hood River', price: '$99.95' }, 
    { name: 'Oregon Coast', price: '$159.95' },
  ],
  specialsUrl: '/january-specials',
  currencies: [ 'USD', 'GBP', 'BTC' ],
} 


<ul>
{{#each tours}}
  {{! I'm in a new block...and the context has changed }}
  <li>{{name}} - {{price}}
    {{#if ../currencies}}
      ({{../currency.abbrev}})
    {{/if}}
  </li>
{{/each}}
</ul>

{{#unless currencies}}
  <p>All prices in {{currency.name}}.</p>
{{/unless}} 

{{#if specialsUrl}}
  {{! I'm in a new block...but the context hasn't changed (sortof) }}
  <p>Check out our <a href="{{specialsUrl}}">specials!</p>
{{else}}
  <p>Please check back often for specials.</p>
{{/if}} 

<p>
  {{#each currencies}}
    <a href="#" class="currency">{{.}}</a>
  {{else}}
    Unfortunately, we currently only accept {{currency.name}}.
  {{/each}}
</p> 

{{../xxxx}}   - dostęp do kontekstu nadrzędnego
{{.}}         - aktualny kontekst (tu zawartość tekstowa z tablicy)
unless        - przeciwny #if - gdy warunek nieprawdziwy