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