6

我有一个混合的 HTML / JS 模板，当我使用 JS 数组时，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>
4

7 回答 7

8

尝试使用

<![CDATA[...]]>

JS 代码周围的标签。

于 2013-07-17T09:39:17.233 回答
7

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>
于 2018-07-24T13:26:46.783 回答
5

<![CDATA[]]> 由于上面的解决方案在 TYPO3 v8.7.16 中对我不起作用，我想分享我自己的解决方案。我逃避括号的“hack”是用<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>
于 2018-07-05T22:58:15.607 回答
3

在 TYPO3 9.x / 9.5.x 中工作的解决方案

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

可能的限制： 在我们的例子中，流体模板仅包含模板头部部分中的流体模板变量angular.js，然后是由.

所以我们为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>
于 2019-04-26T09:51:51.833 回答
1

使用流体变量将“！[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>
于 2015-01-16T11:16:14.613 回答
0

最后一个答案帮助我使用带有Video-js YouTube 扩展的 Video- js在 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>
于 2018-09-25T09:38:17.003 回答
0

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

当我集成 google seach 结构化数据时，我在那里发现了这个应该转到模板的设置

<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>}"/>

于 2020-12-10T10:10:30.690 回答