Conseils et astuces

JavaScript ou CSS dans un gabarit Latte

Il est parfaitement possible d'utiliser des balises Lattes à l'intérieur d'un code JavaScript ou CSS. Mais comment éviter que Latte ne considère à tord le code JavaScript ou le style CSS comme une balise Latte ?

<style>
    /* ERROR: interprets as tag {color} */
    body {color: blue}
</style>

<script>
    // ERROR: interprets as tag {id}
    var obj = {id: 123};
</script>

Solution 1

Éviter les situations où une lettre suit immédiatement un { en insérant un espace, un saut de ligne ou un guillemet simple entre les deux :

<style>
    body {
        color: blue
    }
</style>

<script>
        var obj = {'id': 123};
</script>

Solution 2

Désactiver complètement le traitement des balises Latte à l'intérieur d'un élément en utilisant n:syntax:

<script n:syntax="off">
    var obj = {id: 123};
</script>

Solution 3

Passer à la syntaxe Latte utilisant des accolades doubles à l'intérieur de l'élément :

<script n:syntax="double">
    var obj = {id: 123};          // code JavaScript

    {{if $cond}} alert(); {{/if}} // balise Latte
</script>