在 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/csstext/htmltext/javascript 等属性值规定脚本的 MIME 类型,它表示浏览器的解释方式,例如,text/javascript 告诉浏览器按照 Javascript 来解析执行。

Thymeleaf 与 Javascript的更多相关文章

  1. thymeleaf 使用javascript定义数组报错

    js中免不了的要用的数组,一维的二维的三维的 但是当用到thymeleaf作为模版时候会有一些坑,导致数组不能用 org.thymeleaf.exceptions.TemplateProcessing ...

  2. Thymeleaf前后端传值 页面取值与js取值

    参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...

  3. Thymeleaf使用说明

    Thymeleaf使用说明 javascript操作: a.<script type="text/javascript" th:inline="javascript ...

  4. SSM框架——thymeleaf学习总结

    本人关于thymeleaf的学习源自: https://www.bilibili.com/video/BV1qy4y117qi 1.thymeleaf的项目搭建 首先创建springboot项目,相关 ...

  5. thymeleaf的内联th:inline(在javascript访问model中的数据)

    thymeleaf模板引擎为前端数据的获取提供了较大的便利,在html标签内可通过th标签加${}表达式访问model里的对象数据.但如果不想通过th标签而是简单地访问model对象数据,或是想在ja ...

  6. Thymeleaf Javascript 取值

    <script th:inline="javascript"> var openid = /*[[${session.wxuser.openId}]]*/ </s ...

  7. spring boot(四):thymeleaf使用详解

    在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...

  8. Thymeleaf

    1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...

  9. Thymeleaf+Spring整合

    前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...

随机推荐

  1. nginx+webpy配置

    之前搞app时候学的webpy,一直用的自带webserver,最近研究nginx一段时间,决定二者结合玩一下~ 把搭建的要点总结下,说不定哪天还得用——其实平时手挺懒的... 1 必备模块和背景知识 ...

  2. ASP.NET 保存txt文件

    public void ProcessRequest(HttpContext context) { context.Response.Clear(); context.Response.Buffer ...

  3. delphi.memory.分配及释放---New/Dispose, GetMem/FreeMem及其它函数的区别与相同

    我估摸着内存分配+释放是个基础函数,有些人可能没注意此类函数或细究,但我觉得还是弄明白的好. 介绍下面内存函数前,先说一下MM的一些过程,如不关心可忽略: TMemoryManager = recor ...

  4. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  5. MIS系统开发利器,快速的字典录入解决方案,另类的、可管理的.NET DataWindow

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  6. PAT A 1119. Pre- and Post-order Traversals (30)【二叉树遍历】

    No.1119 题目:由前序后序二叉树序列,推中序,判断是否唯一后输出一组中序序列 思路:前序从前向后找,后序从后向前找,观察正反样例可知,前后序树不唯一在于单一子树是否为左右子树. 判断特征:通过查 ...

  7. Oracle在存储过程中如何返回结果集

    Oracle和Sqlserver不一样的地方有很多. 个人最深的体会是存储过程返回结果集,在Sqlserver中直接select查询就行,Oracle就不行了. 这里,就用最简单的例子说明存储过程返回 ...

  8. 【html+css】关于页面布局中遇到的问题记录

    关于行内元素: 行内元素设置width无效, height无效(可以设置line-height), margin上下无效,padding上下无效,margin和padding可设置左右.   text ...

  9. NOI 2010 海拔 ——平面图转对偶图

    [题目分析] 可以知道,所有的海拔是0或1 最小割转最短路,就可以啦 SPFA被卡,只能换DIJ [代码] #include <cstdio> #include <cstring&g ...

  10. TComboBox; 指定某一行,不给下拉,只读ReadOnly 伪装 实现

    //cbb1: TComboBox; 指定某一行,不给下拉,自读伪装 实现: cbb1.Style :=csSimple; //设定style 不可以下拉 cbb1.ItemIndex := ; // ...