Come assegnare oggetti complessi a variabili JavaScript con Fluid di Typo3

Obiettivo: assegnare un oggetto complesso, Array od Object, a una variabile JavaScript in un template Fluid di Typo3.

Ci sarà capitato di dover "inserire" in una variabile JavaScript, presente in un template Fluid, una valore strutturato: Array od Object, In Fluid risultano, spesso, codici abbastanza illeggibili con tag del tipo
<![CDATA[...]]>
<f:format.raw>{string}</f:format.raw>
<f:format.cdata>{string}</f:format.cdata>

Queste soluzioni, oltre che essere poco pratiche, non sonsentono di assegnare valori complessi e strutturati, ma solo variabili semplici e al massimo un array sempice a cui applicare poi funzioni di split per ottenere un array utilizzabile.

Sì perché Fluid gènera solo ed esclusivamente stringhe da oggetti assegnati via Controller.

La soluzione più pratica, che evita l'utilizzo di "frammentazioni" del codice Javascript con tag Fluid, è quella di includere, nel template Fluid, un elemento "input" di tipo "hidden" e assegnare all'attributo "data", la variabile complessa, Array o Object.

Partiamo dall'inizio.

Nel Controller assegno l'Object alla view

$view->assign('numberingJson', json_encode($numbering));

dove $numbering è un Array associativo. Notare che l'Array viene serializzato in formato JSON per ottenere una stringa.

Il passo successivo è quello di inserire nel template Fluid, un tag "input" di tipo "hidden" e assegnare la variabile Fluid "numberingJson" all'attributo "data" dell'"input"

<f:form.hidden id="numbering" data="{numbering: '{numberingJson}'}" />

Infine da JavaScript recuperare il valore in "data('numbering')" ed effettuare le operazioni necessarie

const numbering = $('#numbering').data('numbering');

Tutto qua, semplice e pulito.