使用JSON定義Handlebars JS partials：在JSON中定義部分的名稱，並使Handlebars JS呈現部分

Question

我們使用config.json來設置基於Handlebars的佈局以從模板生成電子郵件。該json配置包含部分名稱和該部分的內容（圖像，標題和說明）。

的/分音/ ..分別稱爲：

• primary.html
• secondary.html

此處是/data/config.json一個例子 - 您可以看到「模塊」節點包含部分及其內容：

{ 
    "subject": "my email subject", 
    "pretext": "this is the pretext text", 
    "modules": { 
     "primary":{ 
      "image": { 
       "src": "primary-hero.jpg", 
       "alt": "This is the primary image" 
      }, 
      "headline": "Primary Headline", 
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nulla ipsam ratione rem incidunt quasi quos, possimus cumque neque corporis, dignissimos deserunt perspiciatis totam. Totam itaque distinctio deserunt fugiat nostrum." 
      }, 
     "secondary":{ 
      "image": { 
       "src": "secondary-hero.jpg", 
       "alt": "This is the secondary hero image" 
      }, 
      "headline": "Secondary Headline", 
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nulla ipsam ratione rem incidunt quasi quos, possimus cumque neque corporis, dignissimos deserunt perspiciatis totam. Totam itaque distinctio deserunt fugiat nostrum." 
      }, 
    } 
} 

我目前有一個句柄循環/pages/index.html工作，但使用比較幫手。顯然，這種做法有問題，因爲它迫使任意渲染順序，還可以當部分在JSON反覆失敗：

{{#each config.modules}} 
    {{#ifEqual @key "primary"}} 
    {{> primary}} 
    {{/ifEqual}} 
    {{#ifEqual @key "secondary"}} 
    {{> secondary}} 
    {{/ifEqual}} 
{{/each}} 

更理想的是，循環應該是這樣的：

{{#each config.modules}} 
    {{ > @key }} 
{{/each}} 

那當然失敗：

Panini: rendering error ocurred. 
{ [Error: The partial @key could not be found] 
    description: undefined, 
    fileName: undefined, 
    lineNumber: undefined, 
    message: 'The partial @key could not be found', 
    name: 'Error', 
    number: undefined } 

有沒有什麼辦法做到這一點 - 通過json傳遞部分名稱？

Answer 1

我不是很熟悉的手把，所以有可能是一個更好的辦法，但我想出了這個：

Handlebars.registerHelper('renderPartial', (key) => key); 

要使用：

{{#each config.modules}} 
    {{> (renderPartial @key) }} 
{{/each}} 

Answer 2

我已經算起來基於此線程：https://github.com/ericf/express-handlebars/issues/121

「子表達式不解決變量，所以[名稱]必須是一個函數。」

我創建了一個助手，簡單地返回一個字符串：

getPartial

module.exports = function(name) { 
    return name; 
}; 

在車把上渲染循環：

{{#each config.modules}} 
    {{> (getPartial @key) }} 
{{/each}} 

現在呈現沒有錯誤。但是，在JSON中重複部分時，它似乎仍然存在問題，它只會呈現該部分的單個實例。

所以，雖然「二次」在JSON中包含了兩次，它只能呈現部分一次：

{ 
    "subject": "my email subject", 
    "pretext": "this is the pretext text", 
    "modules": { 
     "primary":{ 
      "image": { 
       "src": "primary-hero.jpg", 
       "alt": "This is the primary image" 
      }, 
      "headline": "Primary Headline", 
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nulla ipsam ratione rem incidunt quasi quos, possimus cumque neque corporis, dignissimos deserunt perspiciatis totam. Totam itaque distinctio deserunt fugiat nostrum." 
      }, 
     "secondary":{ 
      "image": { 
       "src": "secondary-hero.jpg", 
       "alt": "This is the secondary hero image" 
      }, 
      "headline": "Secondary Headline", 
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nulla ipsam ratione rem incidunt quasi quos, possimus cumque neque corporis, dignissimos deserunt perspiciatis totam. Totam itaque distinctio deserunt fugiat nostrum." 
      }, 
     "secondary":{ 
      "image": { 
       "src": "secondary-hero.jpg", 
       "alt": "This is the secondary hero image" 
      }, 
      "headline": "Secondary Headline", 
      "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nulla ipsam ratione rem incidunt quasi quos, possimus cumque neque corporis, dignissimos deserunt perspiciatis totam. Totam itaque distinctio deserunt fugiat nostrum." 
      }, 
    } 
} 

這必須直接相關的事實，渲染列表是一個循環和@密鑰必須是唯一的？如果我直接列出部分，它會呈現「次要」預期的兩倍：

{{> primary}} 
{{> secondary}} 
{{> secondary}}