(转载)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>

建议方法二，因为数据定义靠换行总觉得怪怪的，你说呢？

作者：小尘哥
链接：https://www.jianshu.com/p/e23176eec472
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。