thymeleaf模板引擎为前端数据的获取提供了较大的便利,在html标签内可通过th标签加${}表达式访问model里的对象数据。但如果不想通过th标签而是简单地访问model对象数据,或是想在javascript代码块里访问model中的数据,则要使用内联的方法。

  比如,我们可以这样访问对象:

<p>Hello, [[${session.user.name}]]!</p>
  以上代码可以取代下面的一般写法:

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
  Expressions between [[...]] or [(...)] are considered inlined expressions in Thymeleaf。即使用此语法的语句称为“内联”。使用内联的语句的确会更加简洁一些。

  若是想在javascript代码块内直接地使用model的对象值,则必须通过内联来实现。代码如下:

<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var max = /*[[${maxSumOfDateInYear}]]*/ 20;
alert(max);
/*]]>*/
</script>
  其中第2、5行为基于XML的转义写法,第3行把内联访问的语句用注释引起来,且后面跟着一个空格20,是指若不存在此对象,则自动设置默认值为20。

  注意以上的javascript内联写法是基于你需要“直接地”使用model对象值的场景。否则还有其它写法,比如简单地声明一个hidden input:

<input type="hidden" id="maxSumOfDateInYear" th:value="${maxSumOfDateInYear}"/>
<script type="text/javascript" th:inline="none">
var max = $("#maxSumOfDateInYear").val();
var data = [["2012-05-07", 6], ["2012-04-16", 4]];
alert(max);
alert(data);
</script>
  以上第1行声明了一个hidden的maxSumOfDateInYear,然后第3行通过jQuery来间接访问。

  注意,若在thymeleaf代码里存在第4行的二维数组字面量的写法,则必须要把javascript代码块设置为inline为none的,否则thymeleaf引擎会把此数组的[[也当成了内联语句处理,从而导致后端报错An error happened during template parsing。要么,你就还是通过hidden间接访问的方式实现。

  或者,也可以通过ajax直接获取内容来实现。但这就属与thymeleaf模板引擎计算过程无关了。

thymeleaf的内联th:inline(在javascript访问model中的数据)的更多相关文章

  1. (转)内联(inline)函数与虚函数(virtual)的讨论

    本文转自: http://topic.csdn.net/t/20051220/09/4469273.html 函数的inline属性是在编译时确定的, 然而,virtual的性质是在运行时确定的,这两 ...

  2. html中的块元素(Block)和内联元素(Inline)(转)

    我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...

  3. (转载)内联函数inline和宏定义

    (转载)http://blog.csdn.net/chdhust/article/details/8036233 内联函数inline和宏定义   内联函数的优越性: 一:inline定义的类的内联函 ...

  4. 内联函数 inline

    (一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int ...

  5. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  6. 内联函数inline的用法

    一.什么是内联函数 在C语言中,如果一些函数被频繁调用,不断地有函数入栈,即函数栈,会造成栈空间或栈内存的大量消耗.为了解决这个问题,特别的引入了inline修饰符,表示为内联函数.  栈空间就是指放 ...

  7. C++ 内联函数inline

    http://blog.csdn.net/u011327981/article/details/50601800 1.  内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: 复制代码 代码 ...

  8. 【转】ios内联函数 inline

    ios内联函数 inline 缘由 由于在学习使用UIScrollVew开发的过程中,碰到下面这个属性(设置内边距): @property(nonatomic) UIEdgeInsets scroll ...

  9. 07 c++中的内联函数inline

    文章链接: 问题描述:类中成员函数缺省默认是内联的,如果在类定义时就在类内给出函数定义,那当然最好.如果在类中未给出成员函数定义,而又想内联该函数的话,那在类外要加上 inline,否则就认为不是内联 ...

随机推荐

  1. opengl球形网格生成

    效果如图 准备第三方库 glew.freeglut.glm 代码包括主程序源文件mainApp.cpp.顶点着色器shader.vs.片元着色器shader.fs   mainApp.cpp如下 #i ...

  2. WordPress自定义循环

    我们在学WordPress的时候,最常用到的就是循环了.写模板的时候,多数的时间都是和循环打交道的.如果你不能很详细的了解WordPress的循环,是很难写出模板来的. 而WordPress自定义循环 ...

  3. Linux磁盘和文件系统扩容彻底研究

    1.物理卷: LVM 逻辑卷的底层物理存储单元是一个块设备,比如一个分区或整个磁盘.要在 LVM 逻辑卷中使用该设备,则必须将该设备初始化为物理卷(PV). 2.卷组:物理卷合并为卷组(VG).这样就 ...

  4. Spark On YARN(Yarn-Cluster模式)启动流程源码分析(二)

    转自:https://www.cnblogs.com/yy3b2007com/p/11087180.html 本章将针对yarn-cluster(--master yarn –deploy-mode ...

  5. git命令自动补全

    git安装好后发现命令不能自动补全于是搜了很多方法,先按博客里面的方法试了下: 1.下载配置文件 git clone git://git.kernel.org/pub/scm/git/git.git ...

  6. Vue Cli 3 初体验(全面详解)

    vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...

  7. 十步学习法 -- 来自<<软技能>>一书的学习方法论

    <<软技能>>第三篇“学习”,作者讲述了自己的学习方法:十步学习法.下面我用编程语言的方式来介绍. 十步学习法 伪代码介绍 # **这一步的目的不是要掌握整个主题,而是对相关内 ...

  8. cpp调用c的动态库

    目录 cpp调用c的动态库 title: cpp调用c的动态库 date: 2019/11/22 20:34:29 toc: true --- cpp调用c的动态库 CPP文件里这么引用头文件即可 e ...

  9. js 跳转传递汉字参数

    父界面: myChart.on('click', function (params) { var dataIndex = params.dataIndex; if(params.name != &qu ...

  10. spark 执行报错 java.io.EOFException: Premature EOF from inputStream

    使用spark2.4跟spark2.3 做替代公司现有的hive选项. 跑个别任务spark有以下错误 java.io.EOFException: Premature EOF from inputSt ...