Thymeleaf - itère un attribut de modèle à l'intérieur du code Javascript

Je suis en train d'écrire un peu de code Javascript où j'ai besoin d'utiliser un attribut du modèle. Voici comment je définis la balise script:

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    //need some loops

    /*]]>*/
</script>

Ce que j'ai à faire est, utiliser each itérations sur les attributs de modèle à l'intérieur du script. Jusqu'à présent, je ne parvenais pas à le faire avec th:each. Toute aide est appréciée.

Quel est votre modèle?
Supposons qu'il contient une liste de chaînes. J'ai besoin de parcourir la liste des chaînes et de la carte chaque chaîne à l'autre.
Utilisez-vous le JSP?
Je suis en utilisant Thymeleaf.
Ne vous essayez d'analyser votre modèle à un JSON objet? et l'utilisation Thymeleaf à itérer. Je ne suis pas familier avec Thymeleaf.

OriginalL'auteur mtyurt | 2015-04-22

  1. 18

    Je suppose que vous avez besoin d'envelopper votre modèle attrubite en double crochets, comme ceci: [[${modelAttribute}]]. Le script inline section de la Thymeleaf docs peuvent aider un peu:
    http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#script-inlining-javascript-and-dart

    <script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    var theList = [[${modelAttribute}]]
    for (i = 0; i < theList.length; i++) {
        doSomething(theList[i]);
    }

    /*]]>*/
</script>
    Donc, si vous avez beaucoup d'éléments dans la liste et la classe représentant un élément contient un grand nombre de membres, vous vous retrouvez avec un énorme morceau de JavaScript, même si vous avez juste besoin de récupérer seulement 1 propriété... Qui suce aussi, si il ya des propriétés sensibles dans votre élément, ils vont se montrer en JavaScript. Est-il un meilleur moyen pour parcourir la liste et maintenez l'élément en cours dans un local Thymeleaf variable comme avec JSP/JSTL?

    OriginalL'auteur snw

  2. 9

    Vous pouvez également le faire, ce qui est le plus compact, je suppose:

    Dans votre @Controller:

    model.addAttribute("items", new String[] { "item1", "item2", "item3" });

    Dans votre modèle:

    <script type="text/javascript" th:inline="javascript">

var items = [];

/*[# th:each="n : ${items}"]*/

items.push("[(${n})]");

/*[/]*/

</script>

    Autres choses utiles est expliqué ici: [Les GRANDES EXPLOIT] Nouvelle syntaxe textuelle modèle de modes de #395

    Merci pour le signalement de ce haut - je n'ai pas réussi à obtenir le th:chaque travail en ligne, mais je suis sûr que c'est mon novicey utilisation de Thymeleaf. C'est une bonne fonctionnalité et ferait disparaître @maxime de soucis dans la accepté de répondre.
    semble de travail dans Thymeleaf 3 seulement

    OriginalL'auteur yglodt

  3. 3

    Thymeleaf 3 -> voir yglodt réponse

    si vous êtes coincé avec Thymeleaf 2 et votre attribut du modèle est complexe (comme le cas de Maxime Laval), j'ai fini par boucler sur un script : 

    <script th:inline="javascript">
  var dataLayer = [];
</script>
<script th:each="item:${items}" th:inline="javascript">
  dataLayer.push({'attr1':item.attr1, 'attr2':item.attr2, 'attr3':item.attr3});
</script>
<script th:inline="javascript">
  console.log(dataLayer); //do whatever you want with dataLayer...
</script>

    Pas très joli, mais je ne pouvais pas trouver mieux pour mon Google analytics.

    OriginalL'auteur user1075613

  4. 1

    Cela fonctionne avec moi dans la dernière version de thymeleaf en ajoutant /*[[${name}]]*/

    <script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    var theList = /*[[${modelAttribute}]]*/
    for (i = 0; i < theList.length; i++) {
        doSomething(theList[i]);
    }

    /*]]>*/
</script>

    OriginalL'auteur Hany Sakr

  5. 0

    Une autre approche si vous êtes coincé avec Thymeleaf 2 est absusing le "th:bloc"-Élément à l'intérieur de votre Script-Tag

    <script type="text/javascript">
        var arrayOfIds= [
        <th:block th:each="element: ${list}" th:inline="text">[[${element.Id}]],</th:block>
            -1 
        ];
        arrayOfIds.pop(); //Remove the superflous last Element
    </script>

    OriginalL'auteur RealAugust