Freemaker templates render variables with the following syntax: ${name}

Javascript ES6 template strings have a similar syntax ${name}

The problem is that when freemarker runs on the server, it will try to render the templates in the javascript code, because Freemarker thinks that it has encountered a variable (when in fact it is a javascript template that should be rendered on the client). Remnedation on how to handle this?

One way is to wrap all the JS in a freemarker ment (so it is never evaluated),

or put the JS code in a seprate file (not inlined in the html page) so that it is never evaluated by freemarker.

Freemaker templates render variables with the following syntax: ${name}

Javascript ES6 template strings have a similar syntax ${name}

The problem is that when freemarker runs on the server, it will try to render the templates in the javascript code, because Freemarker thinks that it has encountered a variable (when in fact it is a javascript template that should be rendered on the client). Remnedation on how to handle this?

One way is to wrap all the JS in a freemarker ment (so it is never evaluated),

or put the JS code in a seprate file (not inlined in the html page) so that it is never evaluated by freemarker.

• javascript
• freemarker
• template-engine

3 Answers 3

you can use javascripts in noparse tags

 <#noparse>...</#noparse>

or

const name = "WORLD";
Hello ${r"${name}"}

html view "Hello ${name}" output-> Hello WORLD

Update: Since FreeMarker 2.3.28 you can configure FreeMarker to use [=exp] instead of ${exp}, by setting the interpolation_syntax configuration setting to square_bracket (in the Java API: Configuration cfg; ... cfg.setInterpolationSyntax(Configuration.SQUARE_BRACKET_INTERPOLATION_SYNTAX)). Then ${exp} is just static text for FreeMarker. Do not confuse this setting with the tag_syntax setting, which also can have square_bracket value, but is independent of the interpolation syntax (but you may prefer setting both to square_bracket). See also: https://freemarker.apache/docs/dgui_misc_alternativesyntax.html

Outdated answer: FreeMarker's syntax is not configurable unfortunately (nor is the ES6 template syntax, I assume). Because that would be the real solution, to configure it to use something else instead of $. You can create a poor man's implementation of that with a custom TemplateLoader implementation that just delegates to another TemplateLoader, except that it adds a filter to the Reader it returns, and with that it modifies the template on-the-fly. It would replace ${-s with $<#-- -->{, and @{-s with ${. So then your original template can be something like ${forES6} @{forFM}. This have quite a few drawbacks, like the column numbers in FreeMarker error positions will be displaced, and the Eclipse plugin and some other tools won't work.

If you use <#include> to include html files with embedded es6 scripts inside, you might also stumble upon es6 template parsing issues. The simple solution to fix this is using parse=false option:

<#include "/path/to/file.html" parse=false>