How to escape curly bracket "{" in TYPO3 Fluid template?
Try to use
<![CDATA[...]]>
tags around your JS code.
The CDATA solution stopped working in 8.7
I managed to solve the problem using alias in a usecase that heavily mixes javascript and fluid. {l} stands for left (open curly bracket) and {r} stands for right (close curly bracket):
<f:alias map="{l: '{', r: '}'}">
var alter = {};
<f:for each="{alterDB}" as="a">
if (!alter[{a.einsatz}]) { alter[{a.einsatz}] = {}; }
alter[{a.einsatz}][alter[{a.einsatz}].length] = {l} label: "{a.bezeichnung} ({a.kuerzel})", value: {a.uid} {r};
</f:for>
</f:alias>
Solution working in TYPO3 9.x / 9.5.x
To avoid too much markup around curly braces which has a "not so nice" impact on the summary markup (readability and IDE support / highlighting) here an additional solution.
Possible limitation:
In our case the fluid template only contained fluid template variables within the templates head section followed by the entire markup which is processed/rendered by angular.js
.
So we've created a partial for the angular.js
part and included those inside the main fluid template.
Example:
The included partial file now starts using a {parsing off}
statement (see example below).
Partial (simplified):
{parsing off} <!-- This solved all our issues -->
<div ng-show="showSlider">
<div class="slider" data-test="slider-wrapper">
<div class="row">
<div class="slide-indicator-mask col-lg-12">
<div class="slider-scope page-{{firstSlide}}"></div>
</div>
</div>
</div>