Thymeleaf中使用th:inline内联在JS代码中获取Model值不会更新的问题

最新推荐文章于 2024-09-19 08:43:24 发布
原创 最新推荐文章于 2024-09-19 08:43:24 发布 · 574 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了在Thymeleaf模板引擎中遇到的问题：当Java后端更新Model值后，JavaScript代码无法获取到更新后的值。为解决此问题，文章提出了一种笨但有效的方法——通过在HTML页面中添加隐藏域，然后在JavaScript中读取这些隐藏域的值来获取最新数据。更新后的代码示例展示了如何实现这一解决方案。

前言

最近在用Thymeleaf，发现使用th:inline内联在Js取出Model中的值后，如果Model中的值刷新了，JS中的值不会刷新，最后没办法，只能放弃了内联的使用，在页面加入了隐藏域。

问题

先放一下之前有问题的代码：

Js:

var currentTypeNum=[[${
   
   currentTypeNum}]]
var totalTypeNum=[[${
   
   totalTypeNum}]]

Java:

最低0.47元/天 解锁文章
【SpringBoot】3、SpringBoot中整合Thymeleaf模板引擎
Asurplus
04-16 21万+
SpringBoot 为我们提供了 Thymeleaf 自动化配置解决方案，所以我们在 SpringBoot 中使用 Thymeleaf 非常方便 一、简介 Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、Fr...
Thymeleaf 内联语法使用教程
yqj234的专栏
10-01 1634
高级内联和 JavaScript 序列化：关于 JavaScript 内联，需要注意的重要一点是，这种表达式评估是智能的，并且不仅限于字符串。Thymeleaf 将正确地用 JavaScript 语法编写以下类型的对象：字符串，数字，布尔值，数组，List，Map，Beans（具有getter和setter方法的对象）)]被视为内联表达式，在它们内部，我们可以使用任何类型的表达式，这些表达式在 ath:text或th:utext属性中也有效。对应于th:text（结果进行HTML转义，直接输出原内容），
SpringBoot2.x引入Thymeleaf后CSS、JS失效解决办法
Zero .
08-01 1253
1.在页面上方加上 xmlns:th="http://www.thymeleaf.org" 变成这样： <html lang="en" xmlns:th="http://www.thymeleaf.org"> 之后， CSS和JS这样引入 <link th:href="@{/static/asserts/css/dashboard.css}" rel="s...
SpringMVC使用Thymeleaf视图解析技术浏览器无法刷新前端页面
weixin_46666263的博客
09-15 686
SpringMVC使用Thymeleaf视图解析技术浏览器无法刷新前端页面
thymeleaf局部刷新数据
机智的爆爆哥
01-12 2319
效果是这样的 点击按钮 展示数据 为了便于理解 我还是截图吧 user类就两个数据 name 和age 代码送上 @PostMapping("test") public String aaa(Model model) { List<User> users = new ArrayList<>(); users.add(new User("bb", "11")); users.add(new User("cc",
Thymeleaf高级用法：内联文本与脚本交互
通过设置`th:inline="javascript"`，我们能够在JavaScript脚本中直接引用Thymeleaf表达式的值。以下是一个示例： ```html <script th:inline="javascript"> var name=[[${userName}]]+',Sebastian'; alert(name);...
thymeleaf中怎么接收model
最新发布
08-07
在 Thymeleaf 模板引擎中，从后端接收模型数据主要依赖于 Spring MVC 的 `Model` 对象，后端通过 `addAttribute` 方法将数据添加到模型中，前端通过 Thymeleaf 表达式语法（如 `th:text`、`th:value`、`th:each` 等...
<th:block th:each="image, stats: ${imageList}"> <pkg:part pkg:name="/word/media/image_${stats.index}.png" pkg:contentType="image/png"> <pkg:binaryData>[[${image}]] </pkg:binaryData> </pkg:part> </th:block> 纠正以上代码中的thymeleaf语法
07-31
在Thymeleaf中，迭代状态对象的使用方式是通过该变量名直接访问，例如`${stats.index}`，所以这里在属性值中使用`${stats.index}`是不正确的，因为我们在Thymeleaf属性中应该使用Thymeleaf的表达式语法，即`th:xxx`...
使用thymleaf时在js中取值问题
一个菜鸟的提升路
11-30 2669
最近在使用springboot+thymleaf做项目，在使用thymleaf遇到了一些问题，记录一下。 问题一 使用thymleaf时，在js代码中取后台返回的值时，通常使用[[]${返回名称}]，当返回值是一个字符串的时候是没有问题的，但是如果返回值是一个对象，通过这种凡是取出来的是一个字符串，会导致对象中的值取不出来。 例如：返回的user是一个对象，可以这样取值：var user =...
SpringBoot——Thymeleaf中的th:inline（内敛文本text、内敛脚本javascript）
贝尔摩德苦艾酒
05-22 1万+
SpringBoot——Thymeleaf中的th:inline（内敛文本text、内敛脚本javascript）
th:inline=“javascript“
weixin_45390688的博客
09-24 892
在使用thymeleaf时，前端页面如要在javascript中获取后端传入的数据，需要在。
记录一次Thymeleaf th：inline内联问题
泡芙小姐yan的博客
10-30 3128
最近老大让我实现一个项目的国际化功能，大致就是支持项目页面一些固定框架的语言能支持中英文自由切换。所以需要前端跟后端的一些固定字段以及提示语以变量的形式嵌入。前端页面是用大家都很熟知的Thymeleaf渲染，这个东西的确非常好用~ 但是我之前只知道在html标签内通过th标签加${}或者#{}表达式访问变量数据，但是现在的需求需要在javascript代码块里访问变量数据，就去官网查了下，一看好像...
内联js th:inline标签
qq_42479987的博客
03-12 2471
内联js 内联文本：[[…]]内联文本的表示方式，使用时，必须先用th:inline=”text/javascript/none”激活，th:inline可以在父级标签内使用，甚至作为body的标签。内联文本尽管比th:text的代码少，不利于原型显示。 获取项目路径： <script th:inline="javascript" type="text/javascript"> var ctxPath = [[@{/}]]; var ctxPath = /*[[@{/}]]*/
thymeleaf的内联th:inline（在javascript访问model中的数据）
weixin_44248903的博客
09-19 395
thymeleaf的内联th:inline（在javascript访问model中的数据）
Thymeleaf踩坑（th:inline=“javascript“）
热门推荐
纯纯打工人
08-31 1万+
使用若依开发的时候对[[${xxxx.xxx}]]这样的写法已经见怪不怪了，但是在SSM项目中使用Thymeleaf里面的script就很顺手的写下了这个，但是报错，报undefind，这就是很莫名其妙了， 看network的返回值，数组是取到了，但是并没有取到像下面这种可以识别的UTF-8字符串 这就很纳闷了，研究了将近30分钟，反复对比之前的前端代码，终于找到了问题所在 th:inline="javascript"这是Thymeleaf中的内联写法，支持在javascript访问mode..
Thymeleaf中th:inline的用法，Thymeleaf在js代码中取出model的值，Thymeleaf内联[[]]
Scluis的博客
02-01 2357
前言 最近一直在使用thymeleaf，取后端的文本数据一直是用的th:text，今天才知道有个简单的写法，记录一下。 thymeleaf渲染数据 使用thymeleaf，我们可以做到先在页面中写好静态数据查看页面的效果，而当程序真正执行转发或重定向到该页面的时候，由thymeleaf帮我们从后台取出真实数据并渲染。 比如下边代码，我们查看静态页面的时候，h3中的内容是hello，而程序运行时，则会通过thymeleaf结合el表达式加载model中的数据进行显示 <h3 class="ui head
SpringBoot——Thymeleaf常见属性-th:inline内敛文本text、内敛脚本javascript
莫得感情得码农
10-12 928
引言 th:inline 有三个取值类型 (text, javascript 和 none)，值为 none 什么都不做，没有效果 内敛文本（th:inline=”text”）内敛文本表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动态数据，但必须要求在父级标签上加 th:inline = “text”属性 内敛脚本（th:inline=”javascript”）th:inline=”javascript”在 js 代码中获取后台的动态数据 代码举例 内敛文本和内敛脚本
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值