Thymeleaf Come aggiungere blocco condizionale in javascript

Question

Ho un'applicazione Web e utilizzo Thymeleaf con avvio a molla, ho bisogno di includere un'opzione nel mio javascript nel caso in cui l'impostazione internazionale dell'utente sia in arabo, quindi come aggiungere un blocco condizionale e dovrebbe essere elaborato sul lato server?

<script th:inline="javascript"> 
     var customerNameTitle = /*[[#{pendingPayments.customerName}]]*/ 'customer Name'; 
     var amountTitle = /*[[#{pendingPayments.amount}]]*/ 'Amount'; 
     var paymentDateTitle = /*[[#{pendingPayments.paymentDate}]]*/ 'payment Date'; 
     var submissionDateTitle = /*[[#{pendingPayments.submissionDate}]]*/ 'submission Date'; 

     $("document").ready(function(e) { 
      /*<![CDATA[*/ 
       var table = $("#example").DataTable({ 
        "ajax": { 
           "url": /*[[@{/payments/getPendingPayments}]]*/ "", 
           "type": "GET", 
           "dataSrc": "" 
          }, 
        "columns": [ 
           { "data": "customerFullName", "title": customerNameTitle }, 
           { "data": "amount", "title": amountTitle }, 
           { "data": "paymentDate", "title": paymentDateTitle }, 
           { "data": "submissionDate", "title": submissionDateTitle }, 
          ], 
        "language": { 
           "emptyTable": /*[[#{pendingPayments.emptyTable}]]*/ "", 
           "url":/*[[@{'/json/dataTables-ar.json'}]]*/ "" 
           } 
       }); 
      /*]]>*/ 
      }); 
    </script> 

il "url":/*[[@{'/json/dataTables-ar.json'}]]*/ deve essere caricata solo se il locale è l'arabo, altrimenti l'tutta la linea non deve essere stampato in pagina HTML ..

in JSTL posso farlo utilizzando <c:if>

<c:if test="${LOCALE.language eq 'ar' }"> 
    .... 
</c:if> 

c'è un equivalente in Thymeleaf?

Answer 1

Non sono riuscito a trovare un modo per farlo, ma in alternativa si può fare qualcosa di simile.

Definire una variabile js con l'espressione desiderata da &.

var condition = /*[[${LOCALE.language eq 'ar' }]]*/ 'true'; 

$("document").ready(function(e) { 
     /*<![CDATA[*/ 
     if(condition) { 
      var table = $("#example").DataTable({ 
       "ajax": { 
          "url": /*[[@{/payments/getPendingPayments}]]*/ "", 
          "type": "GET", 
          "dataSrc": "" 
         }, 
       "columns": [ 
          { "data": "customerFullName", "title": customerNameTitle }, 
          { "data": "amount", "title": amountTitle }, 
          { "data": "paymentDate", "title": paymentDateTitle }, 
          { "data": "submissionDate", "title": submissionDateTitle }, 
         ], 
       "language": { 
          "emptyTable": /*[[#{pendingPayments.emptyTable}]]*/ "", 
          "url":/*[[@{'/json/dataTables-ar.json'}]]*/ "" 
          } 
      }); 
     } 
     else { 
      var table = $("#example").DataTable({ 
       "ajax": { 
          "url": /*[[@{/payments/getPendingPayments}]]*/ "", 
          "type": "GET", 
          "dataSrc": "" 
         }, 
       "columns": [ 
          { "data": "customerFullName", "title": customerNameTitle }, 
          { "data": "amount", "title": amountTitle }, 
          { "data": "paymentDate", "title": paymentDateTitle }, 
          { "data": "submissionDate", "title": submissionDateTitle }, 
         ], 
       "language": { 
          "emptyTable": /*[[#{pendingPayments.emptyTable}]]*/ "" 
          } 
      }); 
     } 
     /*]]>*/ 
     }); 

Answer 2

Tratto da Thymeleaf tutorial:

Espressione oggetti di base

Quando si valutano le espressioni OGNL sulle variabili di contesto, alcuni oggetti sono messi a disposizione di espressioni per una maggiore flessibilità. Questi oggetti si farà riferimento (secondo la norma OGNL) a partire dalla # symbol: ... #locale: the context locale...

OGNL acronimo di Object-Graph Navigation Language. Quindi, l'utilizzo effettivo sarebbe simile a questa:

<span th:text="${#locale.country}">Should give you Country (in my case HR)</span> 
<span th:text="${#ctx.locale}">Should give you the code (in my case hr_HR)</span> 
<span th:text="${#locale.country}=='ar' ? 'Arabic' : 'Not Arabic'"></span> 

o forse meglio così:

<span th:text="${#strings.startsWith(#ctx.locale, 'ar')? 'Arabic' : 'Not Arabic'}></span> 

dal java offre 17 diversi codici per l'arabo, e tutti iniziano con ar, ultimo esempio dovrebbe funzionare su tutti ...

Credo che sapresti come usarlo nel tuo javascript.

PS> Maggiori informazioni si possono trovare nel Apendix A.

Answer 3

Il più vicino che ho trovato in Thymeleaf 2 è quello di aggiungere una condizione th:if a tutta <script> tag. È quindi possibile avere più tag <script> ma, naturalmente, ci sarà la copia-incolla coinvolta.

Questa funzione è disponibile in Thymeleaf 3

<script th:inline="javascript"> 
    var customerNameTitle = /*[[#{pendingPayments.customerName}]]*/ 'customer Name'; 
    var amountTitle = /*[[#{pendingPayments.amount}]]*/ 'Amount'; 
    var paymentDateTitle = /*[[#{pendingPayments.paymentDate}]]*/ 'payment Date'; 
    var submissionDateTitle = /*[[#{pendingPayments.submissionDate}]]*/ 'submission Date'; 

    $("document").ready(function(e) { 
     /*<![CDATA[*/ 
      var table = $("#example").DataTable({ 
       "ajax": { 
          // Using textual syntax from Thymeleaf 3 
          // (not sure about the exact condition for your case 
          // but this is the syntax to use) 
          [# th:if="${LOCALE.language.equals('ar') }"] 
          "url": /*[[@{/payments/getPendingPayments}]]*/ "", 
          [/] 
          "type": "GET", 
          "dataSrc": "" 
         }, 
       "columns": [ 
          { "data": "customerFullName", "title": customerNameTitle }, 
          { "data": "amount", "title": amountTitle }, 
          { "data": "paymentDate", "title": paymentDateTitle }, 
          { "data": "submissionDate", "title": submissionDateTitle }, 
         ], 
       "language": { 
          "emptyTable": /*[[#{pendingPayments.emptyTable}]]*/ "", 
          "url":/*[[@{'/json/dataTables-ar.json'}]]*/ "" 
          } 
      }); 
     /*]]>*/ 
     }); 
</script> 

Vedere la sintassi Thymeleaf testuale in https://github.com/thymeleaf/thymeleaf/issues/395

Answer 4

Anche se, una domanda vecchia, i seguenti ha lavorato per noi.

<script th:inline="javascript"> 
    /*<![CDATA[*/ 
     var isInlineEdit = [[${param.isInlineEdit} != null ? true:false]]; 

     if(isInlineEdit){ 
     //in line edit code 
     }else{ 
     //no in line edit 
     } 
    /*]]>*/ 
    </script>