Can Mustache Templates do template extension?
I recently found myself in the same boat, except I came from a mako background.
Mustache does not allow for template extension/inheritance but there are a few options available to you that I know of.
You could use partials:
{{>header}}
Hello {{name}}
{{>footer}}You could inject template pre-processing functions into the context for each template that needs to inherit from some other page:
{{#extendBase}}
Hello {{name}}
{{/extendBase}}Hash:
{
"name": "Walden",
"extendBase": function() {
return function(text) {
return "<html><head></head>" + render(text) + "</body></html>"
}
}
}Prepend and append the desired HTML to the relevant pages in your controller.
Have a layout template ala:
{{>header}}
{{{body}}}
{{>footer}}And render the body in your controller, passing that to the layout template as a variable named
body
.Implement template inheritance, pre-mustache, in your code that loads templates.
I wouldn't, however, use the triple mustache because I don't want unescaped HTML to be appearing anywhere, it's just too risky in my opinion.
If someone else has a better solution to this problem I'd love to hear it as well, since I haven't yet taken the plunge in any one of these directions.
Spring Boot .mustache file extension
According to Spring Boot documentation (for v1.5.6, for v2.0.0.M3) you can easily configure the extension of Mustache template files by setting the following property:
spring.mustache.suffix=.mustache # Suffix to apply to template names.
In v1.5.x the default was .html
but in v2.0.0 they switched to .mustache
. (release notes)
Also you can configure IntelliJ IDEA to handle *.html
files with the Handlebars/Mustache plugin by registering *.html
pattern in Settings > Editor > File types > Handlebars/Mustache.
Mustache-like templating language with extends?
Twitter's implementation of Mustache, Hogan, seems to support inheritance now.
See this recent commit: Hogan 3. Add template inheritance...
Render Mustache.js templates in a Chrome extension
chrome.extension.getURL(file)
returns the absolute URL of the requested file, not its contents. You should do an XHR on the template to get its contents instead.
Alternatively, store the contents of your template in your HTML itself using something like <script id="templ" type="text/x-template">...</script>
, and then reference the contents of the template via document.getElementById('templ')
.
Related Topics
Change Second Select List Based on First Select List Value in Rails
"Cannot Use Import Statement Outside a Module" Error When Importing React-Hook-Mousetrap in Next.Js
Understanding Service Worker Scope
How to Print Part of a Rendered HTML Page in JavaScript
Access Elements of Parent Window from Iframe
Linguistic Meaning of 'Let' Variable in Programming
How to Change the HTML Content as It's Loading on the Page
iOS JavaScript Workers High CPU After Terminate()
Es6 Arrow Functions Not Working on the Prototype
Where Do the Parameters in a JavaScript Callback Function Come From
How to Run JavaScript Inside Swift Code
JavaScript Parse Float Is Ignoring the Decimals After My Comma
What Are Asynchronous Functions in JavaScript? What Is "Async" and "Await" in JavaScript