在 Fluid foreach 中填充 Javascript 数组答案

【问题标题】：Fill a Javascript-Array within a Fluid foreach在 Fluid foreach 中填充 Javascript 数组
【发布时间】：2018-12-11 17:20:08
【问题描述】：

我尝试使用流体 foreach 创建一个 js 数组，但我只得到“{obj.background.title}”输出。当我将它放在 console.log 中时它可以工作。

<script>
    <f:for each="{settings.backgrounds}" as="obj" iteration="itemIteration">
        {f:if(condition: itemIteration.isFirst, then: 'var backgrounds = [')}
            {
                    src: "fileadmin/user_upload/configurator_1/background1.jpg",
                    isdark: true,
                    title: "{obj.background.title}",
            },
        {f:if(condition: itemIteration.isLast, then: ']')}
    </f:for>
</script>

【问题讨论】：

标签： javascript typo3 flux fluid

【解决方案1】：

在左花括号或右花括号周围使用f:format.raw。这可以防止 Fluid 解析器将其视为内联访问器。

【讨论】：

这将禁止 Fluid 在 {obj.background.title} 恕我直言插入模板变量
它不会禁止变量的插入，也不会调用其他 ViewHelper。 ViewHelper 禁用转义，而不是解析。在这种情况下，关键是要防止解析器将整个表达式视为内联（对象访问器）语法块。我们通过故意破坏第一个或最后一个花括号周围的模式来做到这一点 - 重复尽可能多的嵌套花括号。请注意，并非在所有情况下都需要这样做，仅在可以将整个块检测为流体的特定情况下。

【解决方案2】：

JavaScript-{ 可能会混淆 Fluid 解析器（题外话：在 HTML 模板引擎中使用 JavaScript 语法标记是多么灾难性的想法，甚至忘记了一种干净的方式来逃避它！）。

也就是说，JavaScript-in-Fluid 被中途解析或根本不解析或介于两者之间的任何东西（正如您刚刚经历的那样）是很常见的。我曾经使用f:format.cdata()，但即使这样也有一些警告。它通常取决于您的 <script> 在模板中的位置，因此如果您想走试错路径，将其更多地移动到模板的末尾可能会有所帮助...

我建议通过将整个 JavaScript 分配给控制器中的模板变量并通过{script -> f:format.raw()} 输出来将动态数据传递给 JavaScript。这意味着控制器中有丑陋的前端相关内容，但它是最快且非常可靠的方法。

或者您可以使用 vhs-ViewHelper 将数据转换为 JSON 并分配 HTML-data-property 并通过外部 JavaScript 逻辑对其进行处理。这也很可靠，在我看来很干净。

在流体中：

<x-mytag data-backgrounds="{v:format.json.encode(value: setting.backgrounds)}" />

理想情况下在外部 JavaScript 中（实际上，这甚至可以在 Fluid 中工作）：

var backgrounds = JSON.parse(
  document.querySelector('[data-backgrounds]').dataset.backgrounds
)

每个人都经历过一次……我非常愿意了解其他方法。

【讨论】：

正如您从我上面的回答中看到的那样，有一种完全有效的方式来逃避此类表达。我还应该纠正 Fluid 只是一个 HTML 模板引擎的误解——它不是。它是一个“任何东西”的模板引擎。它对节点使用 XML 语法，但是您将 JavaScript 放入其中意味着您必须采取预防措施。就像将未转义的实体放入 XML 文档一样；不幸的是，Fluid 无法检测到您希望该特定代码不是 Fluid 并显示相关错误。它不是通灵的；它倾向于忽略未知数。