Заполните Javascript-массив в жидкости foreach - PullRequest
Новая
       5

Заполните Javascript-массив в жидкости foreach

0 голосов
/ 03 июля 2018

Я пытаюсь создать JS-массив с Fluke-Foreach, но я просто получаю вывод "{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>

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

JavaScript- {, вероятно, сбивает с толку парсер Fluid (не по теме: какая катастрофическая идея использовать синтаксический токен JavaScript в движке шаблонов HTML и даже забыть о чистом способе избежать этого!).

Тем не менее, к сожалению, очень часто JavaScript-in-Fluid анализируется наполовину или не выполняется вообще, или между ними (как вы только что видели). Раньше я использовал f:format.cdata(), но даже у этого есть предостережения. Это часто зависит от положения вашего <script> в шаблоне, поэтому перемещение его ближе к концу шаблона может помочь, если вы хотите пойти методом проб и ошибок ...

Я рекомендую передавать динамические данные в JavaScript, назначая весь JavaScript переменной шаблона в вашем контроллере и выводя ее через {script -> f:format.raw()}. Это означает, что в вашем контроллере есть неприятные вещи, связанные с веб-интерфейсом, но это самый быстрый и очень надежный способ.

Или вы можете использовать vhs-ViewHelper, чтобы преобразовать ваши данные в JSON, назначить свойство HTML-data и обработать его с помощью внешней логики JavaScript. Это также работает надежно и довольно чисто в моих глазах.

В жидкости: 

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

В идеале во внешнем JavaScript (на самом деле это будет работать даже внутри Fluid): 

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

Каждый пережил этот опыт однажды ... Я очень открыт, чтобы узнать о других подходах.

0 голосов
/ 03 июля 2018

Используйте f:format.raw вокруг открывающих или закрывающих фигурных скобок. Это не позволяет анализатору Fluid рассматривать его как встроенный метод доступа.

...