// This does mostly the same as that example from the official docs let simple = () => { let template = Handlebars.compile("Handlebars {{doesWhat}}") let out = template({ doesWhat: "rocks!" }) console.log(out) return out } let nested = () => { // This uses each for context switching and uses a nested links parameter let template = Handlebars.compile(` `) return template({ links: [{ 'href': 'https://handlebarsjs.com/guide', 'text': 'Handlebars official guide' }, { 'href': 'https://io.sivert.pw', 'text': 'Awesome blog!' }] }) } // This is how handlebars comments work let comments = Handlebars.compile(` {{! This comment will not show up in the output}} {{!-- This comment may contain mustaches like }} --}} inspect element here!`)() // Simple helper Handlebars.registerHelper('censor', (str) => { return str.replaceAll('fuck', 'f***').replaceAll('hell', 'h***') }) // Block helper Handlebars.registerHelper('', (items, options) => { }) // Handlebars registered partial Handlebars.registerPartial('', '') inlinePartial = ` {{#*inline "inlinePartial"}} {{/inline}}` // Calling non-existent partials with block syntax uses the block content as fallback let advanced = () => { return Handlebars.compile(` {{censor profanity}}`)({'profanity': 'fuckin hell man!'}) } // Run "main" after all is loaded document.addEventListener("DOMContentLoaded", function () { // Add a output element to the end of the Table of Contents let output = document.createElement('div') output.id = 'output' document.getElementById('meta').append(output) // Here we use those "triple mustaches"! let template = Handlebars.compile(`

Examples output:

Functions:

Simple: {{{simple}}}

Nested: {{{nested}}}

Comments: {{{comments}}}

Advanced: {{{advanced}}}

`) // Render and insert the template above document.getElementById('output').innerHTML = template({ simple: simple(), nested: nested(), comments: comments, advanced: advanced() }) })