using freemarker with javascript ES6 Template Strings

Question

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). Recommnedation on how to handle this?

One way is to wrap all the JS in a freemarker comment (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.

egemen · Accepted Answer · 2018-01-23 09:39:06Z

11

you can use javascripts in noparse tags

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

or

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

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

answered Jan 23, 2018 at 9:39

egemen

84713 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ddekany · Accepted Answer · 2018-04-05 12:18:25Z

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.org/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.

Jasper de Vries · Accepted Answer · 2023-01-30 14:45:41Z

2

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>

edited Jan 30, 2023 at 14:45

Jasper de Vries

20.4k6 gold badges68 silver badges107 bronze badges

answered Jan 30, 2023 at 14:43

RiZKiT

2,61835 silver badges29 bronze badges

Collectives™ on Stack Overflow

using freemarker with javascript ES6 Template Strings

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related