thymeleaf關於js的一些坑（陣列定義）

js中免不了的要用的陣列，一維的二維的三維的，但是當用到thymeleaf作為模版時候會有一些坑，導致陣列不能用

先來看個異常

Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "
             {field:'checkBox',checkbox: true, fixed: true}
            ,{field:'username', title: '使用者名稱'} //width 支援：數字、百分比和不填寫。你還可以通過 minWidth 引數區域性定義當前單元格的最小寬度，layui 2.2.1 新增
            ,{field:'mobile', title: '手機號', sort: true}
            ,{field:'nickname', title: '暱稱'}
            ,{field:'lastLoginTime', title: '最後登入時間'}
            ,{field:'ip', title: '最後登入ip', align: 'center'} //單元格內容水平居中
            ,{field:'op',title: '操作', align:'center', toolbar: '#toolBars'} //這裡的toolbar值是模板元素的選擇器
        " (template: "platform/user/list" - line 48, col 20)
    at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:131) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:62) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:44) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.EngineEventUtils.parseAttributeExpression(EngineEventUtils.java:220) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.EngineEventUtils.computeAttributeExpression(EngineEventUtils.java:207) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.standard.processor.AbstractStandardExpressionAttributeTagProcessor.doProcess(AbstractStandardExpressionAttributeTagProcessor.java:103) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.processor.element.AbstractAttributeTagProcessor.doProcess(AbstractAttributeTagProcessor.java:74) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.processor.element.AbstractElementTagProcessor.process(AbstractElementTagProcessor.java:95) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.util.ProcessorConfigurationUtils$ElementTagProcessorWrapper.process(ProcessorConfigurationUtils.java:633) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.ProcessorTemplateHandler.handleOpenElement(ProcessorTemplateHandler.java:1314) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.OpenElementTag.beHandled(OpenElementTag.java:205) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.TemplateModel.process(TemplateModel.java:136) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.TemplateManager.process(TemplateManager.java:519) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.util.LazyProcessingCharSequence.writeUnresolved(LazyProcessingCharSequence.java:85) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.util.AbstractLazyCharSequence.write(AbstractLazyCharSequence.java:103) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.AbstractTextualTemplateEvent.writeContent(AbstractTextualTemplateEvent.java:224) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.Text.write(Text.java:78) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    at org.thymeleaf.engine.OutputTemplateHandler.handleText(OutputTemplateHandler.java:71) ~[thymeleaf-3.0.9.RELEASE.jar:3.0.9.RELEASE]
    ... 96 common frames omitted

這裡只接觸最外層異常，而出現異常的位置

<script>
    var cols=[[
        {field:'checkBox',checkbox: true, fixed: true}
        ,{field:'username', title: '使用者名稱'} //width 支援：數字、百分比和不填寫。你還可以通過 minWidth 引數區域性定義當前單元格的最小寬度，layui 2.2.1 新增
        ,{field:'mobile', title: '手機號', sort: true}
        ,{field:'nickname', title: '暱稱'}
        ,{field:'lastLoginTime', title: '最後登入時間'}
        ,{field:'ip', title: '最後登入ip', align: 'center'} //單元格內容水平居中
        ,{field:'op',title: '操作', align:'center', toolbar: '#toolBars'} //這裡的toolbar值是模板元素的選擇器
    ]];
</script>

乍一看，沒問題，也許對應用過thymeleaf的小夥伴來說一眼就看出了問題，但是對於新手確實很難發現，thymeleaf會把[[]]中的內容作為內聯取值塊解析，而不是陣列。
解決辦法：
方法一：回車換行如下：

<script>
    var cols=[
                [
                {field:'checkBox',checkbox: true, fixed: true}
                ,{field:'username', title: '使用者名稱'} //width 支援：數字、百分比和不填寫。你還可以通過 minWidth 引數區域性定義當前單元格的最小寬度，layui 2.2.1 新增
                ,{field:'mobile', title: '手機號', sort: true}
                ,{field:'nickname', title: '暱稱'}
                ,{field:'lastLoginTime', title: '最後登入時間'}
                ,{field:'ip', title: '最後登入ip', align: 'center'} //單元格內容水平居中
                ,{field:'op',title: '操作', align:'center', toolbar: '#toolBars'} //這裡的toolbar值是模板元素的選擇器
                ]
            ];
</script>

方法二：新增th:inline="javascript"或者th:inline="none"，預設是th:inline="text"

<script th:inline="none">
</script>

建議方法二，因為資料定義靠換行總覺得怪怪的，你說呢？