将JavaScript变量包含在Thymeleaf中

Question

如何在Thymeleaf中包含一个JavaScript变量以检查条件？

尝试过的方法：

<div th:if="${myVariable == 5}">
 //some code
</div>

但它没有起作用。

- Deepak Ramakrishnan Kalidass

Answer 1

你尝试的方法行不通，因为Thymeleaf在服务器端处理模板，因此它可以访问的变量是定义在其模型中的变量。

如果你在Thymeleaf操作的模型中有myVariable，那么它将可用。

如果你想在Thymeleaf模板中设置Javascript变量的值，可以按照以下方式进行：

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

    var myVariable= /*[[${myVariable}]]*/ 'value';

    ...
/*]]>*/
</script>

在脚本中，您可以包含任何逻辑，包括隐藏/显示等。

详见文档的此部分获取更多细节。

- geoand

Answer 2

在使用Thymeleaf 3时，必须删除CDATA块才能内联引用我的变量，否则解析器会完全忽略它。升级后，这种语法对我来说成功地起作用：

<script th:inline="javascript">
     var myVariable = [[${#vars.myVar}]];
     ...
</script>

注意：如果您将变量引用为[[${#ctx.variables.myVar}]]，在Thymeleaf 3中它将不再起作用，因为ctx不再具有名为variables的变量。

- Taugenichts

Answer 3

我认为我理解了你的问题，但我不认为这是可能的。Thymeleaf进行服务器端渲染，因此它不会使用JavaScript变量，因为这些变量不会在服务器上创建。

你可以尝试编写一个初始化函数来隐藏/显示某些DOM元素。你可以采用多种方法，例如给它们分配ID并更改它们的类列表以添加"display:none"样式。

- MrSimple

Answer 4

<script>
   // <![CDATA[
     ...Your script, here
   // ]]>
</script>

- Saurabh