HTML- & JSON-uitvoer

HTML-veilige blok-helpers

HTML-editors zoals CKEditor handhaven een geldige HTML-structuur. Wanneer je Handlebars-blok-helpers (bijv. {{#each}}) als vrije tekst binnen een <table> plaatst, verplaatst de editor deze buiten de tabel omdat ze geen geldige tabelkinderen zijn. Het resultaat is een kapot sjabloon.

Als oplossing hiervoor ondersteunt de sjabloonengine twee aangepaste HTML-dataattributen waarmee je Handlebars-blok-helpers rechtstreeks op een element kunt insluiten:

attribuut	beschrijving
data-template-start	De openende Handlebars-expressie, vlak vóór het element ingevoegd als tekst bij verwerking
data-template-end	De sluitende Handlebars-expressie, vlak na het element ingevoegd als tekst bij verwerking

Omdat dit standaard HTML-attributen zijn, behandelt de editor het element als geldige HTML en laat het ongemoeid. De backend-preprocessor (AngleSharp) verwijdert de attributen en voegt de expresssietekst in vóór sjablooncompilatie — wat identieke uitvoer oplevert als de vrije-tekstbenadering.

Oude aanpak — kapot in HTML-editors:

{{#sortedArray __AdditionalData.statementOfFacts 'date'}}{{#each this}}
<tr>
  <td>{{dateFormat date 'dddd dd-MM' 'en-US'}}</td>
  <td>{{__DataFieldFormatting.event.__DisplayName}}</td>
  <td>{{remarks}}</td>
</tr>
{{/each}}{{/sortedArray}}

Nieuwe aanpak — HTML-veilig:

<tr
  data-template-start="{{#sortedArray __AdditionalData.statementOfFacts 'date'}}{{#each this}}"
  data-template-end="{{/each}}{{/sortedArray}}"
>
  <td>{{dateFormat date 'dddd dd-MM' 'en-US'}}</td>
  <td>{{__DataFieldFormatting.event.__DisplayName}}</td>
  <td>{{remarks}}</td>
</tr>

---

Wanneer gebruik je dit

• Zowel data-template-start als data-template-end moeten op hetzelfde element staan. Een element met slechts één van de twee attributen wordt stilzwijgend genegeerd.
• De attribuutwaarden worden letterlijk ingevoegd — zorg dat openende en sluitende expressies in balans zijn.
• Werkt op elk hoestelement (<tr>, <div>, <li>, etc.), niet alleen op tabelrijen.

Migratienoot: Bestaande sjablonen die vrije-tekst Handlebars rondom HTML-elementen gebruiken, blijven gewoon werken — er gaat standaard niets kapot. Migratie is alleen nodig wanneer je zo'n sjabloon wilt openen en bewerken in de HTML-editor (CKEditor). Het openen van een oud sjabloon in de editor herpositioneert de vrije-tekstsyntaxis en breekt de voorvertoning. Herschrijf de betrokken blokken op dat moment naar data-template-start / data-template-end.

---

JSON-uitvoer (onbewerkt en gecodeerd)

De sjabloonengine kan de huidige gegevenscontext als JSON uitvoeren. Er zijn twee varianten — let op het verschil in aantal accolades.

Onbewerkte JSON — geeft niet-escaped JSON uit (gebruik in een JSON-sjabloon of waar de ontvanger het rechtstreeks verwerkt):

{{{ json this }}}

Gecodeerde JSON — geeft HTML-gecodeerde JSON uit (veilig voor insluiting in HTML of XML):

{{ this | json }}

Gebruik de gecodeerde vorm wanneer de JSON binnen een HTML-attribuut of elementwaarde verschijnt. Gebruik de onbewerkte vorm wanneer het volledige JSON-object ongewijzigd moet worden doorgegeven.