後端框架與API 開發(3-1) – Handlebar helper

※ 什麼是 Helper？

Helper 通常指的是樣板引擎裡的邏輯工具。當我們想做的事情超越內建功能時，就可以自訂 helper。

※ Handlebar helper的用處

說明：Handlebars helper 是一種自定義函數，可以在 Handlebars 模板中執行邏輯操作。這些函數可以像內建函數一樣在模板中使用，使模板更加靈活和動態。它們不僅可以處理複雜的邏輯，還可以根據特定需求定義自己的 helper。

※ Handlebar helper 可以分為三種類別：

1. 內建 Helpers (Built-in Helpers)，常見的內建 helpers 包括：

• {{#if}} {{else}} {{/if}}：用於處理條件判斷。

{{#if userIsActive}}
  <p>歡迎回來！</p>
{{else}}
  <p>請登入。</p>
{{/if}}

• {{#unless}} {{/unless}}：條件判斷的反轉，「如果不是」的意思。
• {{#each 變數名稱}} {{/each}}：用於處理迴圈，通常用於遍歷陣列，類似for 或 foreach。在迭代數組時，{{this}} 會引用當前元素的值。在迭代物件時，{{@key}} 會引用屬性的名稱，而 {{this}} 則會引用屬性的值。

{{#each users}}
  <p>姓名：{{this.name}}</p>
  <p>年齡：{{this.age}}</p>
{{/each}}

• {{#with 變數名稱}} {{/with}} ：通常將一個物件解構成新的上下文，使得在區塊內可以直接訪問該物件的屬性，而不需要一層一層地從原來的上下文中查找。就像是一個"放大鏡"，讓你能夠更清楚地看到物件的內部，而不需要從外部一層一層地找。好處是簡化了模板的複雜性並提高了可讀性。

{{#with user}}
  <p>姓名：{{name}}</p>
  <p>年齡：{{age}}</p>
{{/with}}

2. Custom helper：可以自己定義助手；不會有結束標籤。

• {{uppercase 變數名稱}}：將指定的變數轉換為大寫。

{{uppercase "hello world"}}//輸出 “HELLO WORLD”

• {{link 變數名稱}}：用於創建一個指向特定 URL 的超連結。

{{link "https://example.com"}} //輸出<a href="https://example.com"></a>

3. Block helper：Block意思是說會有一個開頭和一個結尾。可以定義自定義的迭代器和其他功能，並可以調用傳遞的區塊並使用新的上下文。這意味著你可以在 Block helper 的區塊內使用不同的上下文。

• {{#list 變數名稱}} {{/list}} ：處理陣列中的每一個項目（item）。

let context = {
  items: ['Apple', 'Banana', 'Cherry']
}

<ul>
  {{#list items}}
    <li>{{this}}</li>
  {{/list}}
</ul>

//輸出結果
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>