如何在TYPO3 Fluid模板中转义大括号“{ }”？

Question

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

有没有方法可以在Fluid模板中转义大括号？

更新：

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

- Fedir RYKHTIK

Answer 1

在8.7版本中，CDATA解决方案停止工作。

我使用别名解决了这个问题，这个问题涉及到大量混合JavaScript和fluid的用例。 {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>

- Markus Kappe

Answer 2

尝试使用

<![CDATA[...]]>

将你的JS代码用标签包起来。

- Susi

---

好的。我刚找到了Bastian Waidelich的答案http://forge.typo3.org/issues/8879 现在它可以工作了，谢谢。 - Fedir RYKHTIK

Answer 3

由于在TYPO3 v8.7.16中，<![CDATA[]]>的解决方案对我不起作用，因此我想分享自己的解决方案。我的“hack”是使用<f:format>视图助手来包装大括号以转义它们。

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

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

- Jan Fässler

Answer 4

在TYPO3 9.x / 9.5.x中运行的解决方案

为了避免花括号周围太多的标记对摘要标记产生“不太好看”的影响（可读性和IDE支持/高亮），这里提供另一种解决方案。

可能的限制： 在我们的情况下，fluid模板中只包含了模板头部分的fluid模板变量，其后是由angular.js处理/呈现的整个标记。

因此，我们创建了一个用于angular.js部分的partial，并将其包含在主fluid模板中。

示例：

现在，被包含的partial文件开始使用一个{parsing off}语句（见下面的示例）。

Partial（简化版）：

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

- Bernhard

Answer 5

使用流体变量将"![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>

- Dieter

---

"{startCDATA}"和"{endCDATA}"是从哪里来的？ - ViRuSTriNiTy

在 TYPO3 8.7 中，现在对我来说像这样工作：这有点荒谬，但至少它做了预期的事情。 - A. wolo Wolski

Answer 6

也许有点晚了，但我也找到了一个有趣的解决方案。

当我集成谷歌搜索结构化数据时，我发现了这个设置，应该放在模板中：

<meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>

这是我发现的最简单的集成方式：

<meta itemprop="target" content="https://query.example.com/search?q={<f:format.raw>search_term_string</f:format.raw>}"/>

- Martin Pibyl Marty

Answer 7

上一个回答帮助我使用Video-js和Video-js YouTube扩展程序在TYPO3 fluid模板中插入YouTube视频的公共URL文件。

在fileadmin中添加新视频后，在fluid中发布{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>

- Florian Steller

---

如果您使用内联格式（{file.publicUrl->f:format.raw()}），它可能更易于阅读。 - Bernd Wilke πφ

Answer 8

在添加通讯简报背景的过程中，我不得不将Microsoft VML添加到我的流体中。这也包含了流体试图处理的部分。我的方法是：我定义了一个流体变量：

page.10 = FLUIDTEMPLATE
page.10.variables.msxml = TEXT
page.10.variables.msxml.value (
                <!--[if gte mso 9]>
                <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
                <v:fill type="tile" src="http://reguengo.com.dedi87.your-server.de/fileadmin/templates/imgs/fgp_reguengo_bg.gif" color="#7bceeb"/>
                </v:background>
                <![endif]-->
            )

并插入：

<f:format.raw>{msxml}</f:format.raw>

voilà

- Seebold

Answer 9

针对数据属性的问题，例如

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

我发现最简单的解决方案是交换单引号和双引号，例如

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

- rantanplan