如何在TYPO3 Fluid模板中逃避花括号“{”？

Question

我有一个混合的HTML / JS模板，当我使用JS数组时，Fluid尝试进行自动替换。

有没有办法在Fluid模板中转义花括号？

UPD：

逃避JS部分的实际工作语法是：

<script type="text/javascript">/*<![CDATA[*/
/*]]>*/
var llKeyOne = '{f:translate(key:"key1")}';
var llKeyTwo = '{f:translate(key:"key2")}';
/*<![CDATA[*/
var myTranslations = {
  llKeyOne: llKeyOne,
  llKeyTwo: llKeyTwo
};
/*]]>*/</script>

Answer 1

尝试使用

<![CDATA[...]]>

JS代码周围的标签。

Answer 2

CDATA解决方案在8.7中停止工作

我设法在一个大量混合javascript和流体的用例中使用别名来解决问题。 {l}代表左（开放的大括号），{r}代表右（大括号）：

<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>

Answer 3

使用fluid-Variable将“！[CDATA [”]添加到脚本中。

我在javascript中使用了流体的标记符号，因为语法突出显示效果更好。

<script type="text/javascript">/*{startCDATA}*/

var llKeyOne = '<f:translate key="key1" />';
var llKeyTwo = '<f:translate key="key2" />';
var myTranslations = {
  llKeyOne: llKeyOne,
  llKeyTwo: llKeyTwo
};
/*{endCDATA}*/</script>

我以相同的方式解决了动态模板中TYPO3-fluid和angulars-expressions的括号问题

<f:alias map="{ang: {s: '{{', e: '}}'}}">
...    
    <div class="{ang.s}{class}-{subclass}{ang.e}">...
</f:alias>

Answer 4

由于在TYPO3 v8.7.16中使用<![CDATA[]]> solution above对我没有用，我想分享我自己的解决方案。我逃脱括号的“黑客”是用<f:format> viewhelper包装那些。

我的目标是在前端输出这个（400和swing是流量变量）：

<ul data-animate="{duration:400, easing:'swing'}">
    ...
</ul>

我在Fluidtemplate中做到了这一点并且完美无缺：

<ul data-animate="<f:format.raw>{</f:format.raw>duration: {data.myfield1}, easing:'{data.myfield2}'<f:format.raw>}</f:format.raw>">
    ...
</ul>

Answer 5

Solution working in TYPO3 9.x / 9.5.x

为了避免在花括号周围添加太多标记，这对标记（可读性和IDE支持/突出显示）具有“不太好”的影响，这里有一个额外的解决方案。

可能的限制：在我们的例子中，流体模板仅包含模板头部分中的流体模板变量，后面是由angular.js处理/呈现的整个标记。

因此，我们为angular.js部分创建了一个部分，并将其包含在主流体模板中。

示例：

包含的部分文件现在使用{parsing off}语句开始（参见下面的示例）。

部分（简化）：

{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>

Answer 6

最后一个答案告诉我使用Video-js和Video-js YouTube extension在TYPO3流体模板中插入YouTube视频的文件公共URL。

在fileadmin中添加新视频并在流体中发布{file.publicUrl}后返回错误。将它包装在f：format中就可以了！

<f:format.raw>{file.publicUrl}</f:format.raw>

这是获取YouTube视频的完整代码：

<f:if condition="{file.originalFile.properties.extension} == 'youtube'
    <video
        id="vid1"
        class="video-jS"
        data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "<f:format.raw>{file.publicUrl}</f:format.raw>"}] }'
    >
    </video>
</f:if>