如何在javascript中添加条件块

Thymeleaf How to add conditional block in javascript

本文关键字：添加 条件 javascript      更新时间：2023-09-26

我有一个web应用程序，并使用Thymeleaf与spring启动，我需要在我的javascript中包括一个选项，如果用户区域设置是阿拉伯语，那么如何添加一个条件块，应该在服务器端处理?

<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>

"url":/*[[@{'/json/dataTables-ar.json'}]]*/只应该在语言环境为阿拉伯语时加载，否则整行不应该在HTML页面中打印。

JSTL中的

我可以使用<c:if> 

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

在Thymeleaf中有等价的吗?

虽然这是一个老问题，但下面的问题对我们有效。

    <script th:inline="javascript">
    /*<![CDATA[*/
      var isInlineEdit = [[${param.isInlineEdit} != null ? true:false]];
      if(isInlineEdit){
        //in line edit code
      }else{
        //no in line edit
      }
    /*]]>*/
    </script>

我在Thymeleaf 2中发现的最接近的是将th:if条件添加到整个<script>标记。你可以有多个<script>标签，但当然会涉及到复制粘贴。

此功能在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>

参见https://github.com/thymeleaf/thymeleaf/issues/395

中的百里香文本语法

我找不到这样做的方法，但是你也可以这样做。

用你想要的表达式&使用它。

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}]]*/ ""
                          }
            });
        }
        /*]]>*/
       });

摘自百里香教程:

表达式基本对象

在对上下文变量求值OGNL表达式时，有些对象可用于表达式，以获得更高的灵活性。这些对象将被引用(根据OGNL标准)# symbol:<代码>#locale: the context locale...CC_9

OGNL代表对象图导航语言。所以实际的用法是这样的:

<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>

或者这样更好:

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

由于Java为阿拉伯语提供了17种不同的代码，并且它们都以ar开头，最后一个示例应该适用于所有…

我相信你会知道如何在javascript中使用它。

PS>更多信息见附录a

相关文章：