Thymeleaf 与 Javascript
在 javascript 代码中使用 Thymeleaf 模板引擎:
<script th:inline="javascript">
$("#content").html(
"<select name='status'>"+
" <option value=''>[[#{admin.common.choose}]]</option>"+
" <option value="+[[${status}]]+">[[#{'Order.Status.' + ${value}}]]</option>"+
"</select>");
</script>
script
标签中的 th:inline="javascript"
属性值表示可以使用内联 js ,即可以在 js 代码中使用 [[]]
取值:
var user = [[${user}]];
//还可以使用下面这种形式(最后的表示默认值)
var user = /*[[${user}]]*/ null;
以上是在 Javascript 代码中使用 Thymeleaf 模板引擎的简单示例,但有时也会遇到不可解决或者说很难解决的问题。例如,如果要在 js 代码中输出一个段 html 代码,并且要在 html 代码中作循环操作,而 html 本身并没有提供这种功能的实现,这时要使用 Thymeleaf 的 th:each
属性,但是如何使用 th:each
在 js 中实现? 这时就不能像上面那样的使用字符串拼接内联 js 来实现了,因为 th:xx
是要作为标签的属性放在标签内部的,js 解析不了。解决的方案是将 html 代码放在一个使用 text/html
解析的 script
标签中,这样就会使用 html 的解析方式来解析这些代码,示例如下:
<script type="text/html" id="thymeleafTable">
<table>
<tr>
<th th:text="#{Order.type}"></th>
<td>
<select name="type">
<option value="" th:text="#{admin.common.choose}"></option>
<option th:each="value : ${types}" th:value="${value}" th:attr="selected = ${value == type} ? 'selected' : ''" th:text="#{'Order.Type.' + ${value}}"></option>
</select>
</td>
</tr>
</table>
</script>
然后在 js 代码中使用脚本的 id 来调用该脚本:
$("#content").html($("#thymeleafTable").html());
text/css
、text/html
和text/javascript
等属性值规定脚本的 MIME 类型,它表示浏览器的解释方式,例如,text/javascript
告诉浏览器按照 Javascript 来解析执行。
Thymeleaf 与 Javascript的更多相关文章
- thymeleaf 使用javascript定义数组报错
js中免不了的要用的数组,一维的二维的三维的 但是当用到thymeleaf作为模版时候会有一些坑,导致数组不能用 org.thymeleaf.exceptions.TemplateProcessing ...
- Thymeleaf前后端传值 页面取值与js取值
参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...
- Thymeleaf使用说明
Thymeleaf使用说明 javascript操作: a.<script type="text/javascript" th:inline="javascript ...
- SSM框架——thymeleaf学习总结
本人关于thymeleaf的学习源自: https://www.bilibili.com/video/BV1qy4y117qi 1.thymeleaf的项目搭建 首先创建springboot项目,相关 ...
- thymeleaf的内联th:inline(在javascript访问model中的数据)
thymeleaf模板引擎为前端数据的获取提供了较大的便利,在html标签内可通过th标签加${}表达式访问model里的对象数据.但如果不想通过th标签而是简单地访问model对象数据,或是想在ja ...
- Thymeleaf Javascript 取值
<script th:inline="javascript"> var openid = /*[[${session.wxuser.openId}]]*/ </s ...
- spring boot(四):thymeleaf使用详解
在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...
- Thymeleaf
1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...
- Thymeleaf+Spring整合
前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
随机推荐
- 解决dom4j java.lang.NoClassDefFoundError: org/jaxen/JaxenException
即使用这个方法需要以下两个包: dom4j-1.6.1.jar-306 KB jaxen-1.1-beta-6.jar-238 KB 或者 <dependency> <groupId ...
- c/c++连接mysql数据库
环境:win7 x64.vs2008.mysql 对于已经安装mysql的,查看mysql安装目录,如果安装目录下没有include和lib目录, 说明没有完全安装,需要下载mysql-connect ...
- sqlserver表分区小结
为什么要表分区? 当一个表的数据量太大的时候,我们最想做的一件事是什么?将这个表一分为二或者更多分,但是表还是这个表,只是将其内容存储分开,这样读取就快了N倍了 原理:表数据是无法放在文件中的,但是 ...
- HTML行为元素和块级元素及语义化
块级元素 div - dl - form 交互表单h1 - h6 标题 hr 水平分割线p 段落ul 非排序列表table 表格 行内元素 a 链接br 换行em 强调i 斜体img 图片input ...
- MySQL 相关
Innodb引擎 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统. 但是该引擎不支持FULLT ...
- 协同过滤和简单SVD优化
协同过滤(collaborative filtering) 推荐系统: 百度百科的定义是:它是利用电子商务网站向客户提供商品信息和建议,帮助用户决定应该购买什么产品,模拟销售人员帮助客户完成购买过程主 ...
- iTextSharp简单生成pdf和操作pdf添加水印
遇到需要导出页面到pdf,并添加pdf水印的业务.稍微研究了下,借阅网友的前车之鉴,经过使用可行之后的代码贴出来,做个记录,也供需要的网友借阅. public class PDFSetWaterMar ...
- Daily Scrum Meeting ——EighthDay
一.Daily Scrum Meeting照片 橙汁参加ICPC未归,周一牛姐去上课,佳恺今天去迎新晚会表演舞台剧了 二.Burndown Chart 今日没有燃掉issues 增添了两个issue ...
- ios8 设置单元格分割线无效
原来: [self.tableView setSeparatorInset:UIEdgeInsetsMake(0, 0, 0, 0)];//分隔线紧贴左右边框 || [self.tableView s ...
- ASP.NET常见面试题及答案(130题)
1.C#中 property 与 attribute(抽像类)的区别,他们各有什么用处,这种机制的好处在哪里?答:property和attribute汉语都称之为属性.不过property是指类向外提 ...