Question

我尝试创建带有Fluid-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>

Answer 1

在左括号或右括号处使用f:format.raw。这样可以防止Fluid解析器将其视为嵌入式访问器。

Answer 2

JavaScript-{可能会使Fluid解析器感到困惑（主题：在HTML模板引擎中使用JavaScript语法令牌，甚至忘记了一种逃脱它的干净方法，这是一个灾难性的想法！）。

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

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

或者您可以使用vhs-ViewHelper将数据转换为JSON，并分配HTML数据属性，并通过外部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 foreach中填充一个Javascript数组

2 个答案: