thymeleaf的内联th:inline(在javascript访问model中的数据)
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中的数据)的更多相关文章
- (转)内联(inline)函数与虚函数(virtual)的讨论
		
本文转自: http://topic.csdn.net/t/20051220/09/4469273.html 函数的inline属性是在编译时确定的, 然而,virtual的性质是在运行时确定的,这两 ...
 - html中的块元素(Block)和内联元素(Inline)(转)
		
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
 - (转载)内联函数inline和宏定义
		
(转载)http://blog.csdn.net/chdhust/article/details/8036233 内联函数inline和宏定义 内联函数的优越性: 一:inline定义的类的内联函 ...
 - 内联函数 inline
		
(一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int ...
 - 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
		
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
 - 内联函数inline的用法
		
一.什么是内联函数 在C语言中,如果一些函数被频繁调用,不断地有函数入栈,即函数栈,会造成栈空间或栈内存的大量消耗.为了解决这个问题,特别的引入了inline修饰符,表示为内联函数. 栈空间就是指放 ...
 - C++ 内联函数inline
		
http://blog.csdn.net/u011327981/article/details/50601800 1. 内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: 复制代码 代码 ...
 - 【转】ios内联函数 inline
		
ios内联函数 inline 缘由 由于在学习使用UIScrollVew开发的过程中,碰到下面这个属性(设置内边距): @property(nonatomic) UIEdgeInsets scroll ...
 - 07 c++中的内联函数inline
		
文章链接: 问题描述:类中成员函数缺省默认是内联的,如果在类定义时就在类内给出函数定义,那当然最好.如果在类中未给出成员函数定义,而又想内联该函数的话,那在类外要加上 inline,否则就认为不是内联 ...
 
随机推荐
- Hadoop 部署之 Hive (五)
			
目录 一.Hive 简介 1.什么是 Hive 2.为什么使用 Hive 3.Hive 的特点 4.Hive 的架构 二.Hive 安装 1.MySQL 安装(datanode01) 2.MySQL ...
 - 第一章 python+selenium自动化测试实战
			
@序章 自动化测试是软件测试的主流方向之一: 教程从测试的根本需求出发,讲解如何开展自动化测试. 首先,我们要明白,自动化仅仅是满足我们某种需求的一种工具:没有必要花费时间把它全部弄懂:我们只需要学会 ...
 - WPScan使用完整攻略:如何对WordPress站点进行安全测试
			
转载自FreeBuf.COM 严正声明:本文仅限于技术探讨,严禁用于其他目的. 写在前面的话 在这篇文章中,我将告诉大家如何使用WPScan来对WordPress站点进行安全测试. WPScan是Ka ...
 - 打印 request 请求中的参数
			
@SuppressWarnings({"rawtypes"})private void showParams(HttpServletRequest request) { Map&l ...
 - Oracle的查询-多行查询
			
多行函数[聚合函数],作用于多行,返回一个值 ) from emp;--查询总数量 select count(empno) from emp;--查询总数量 select count(*) from ...
 - MySql设计表中的create_time和update_time字段
			
一般create_time和update_time字段的类型为datetime类型,长度为0
 - LC 394. Decode String
			
问题描述 Given an encoded string, return its decoded string. The encoding rule is: k[encoded_string], wh ...
 - php7和PHP5对比的新特性和性能优化
			
1 抽象语法树( AST) 1)在 PHP5中,从 php 脚本到 opcodes 的执行的过程是: Lexing:词法扫描分析,将源文件转换成 token 流: Parsing:语法分析,在 ...
 - vue的基本语法
			
在学习vue之前,我们应了解一下什么是vue.js? 什么是Vue.js? Vue.js是目前最后一个前端框架,React是最流行的一个前端框架(react除了开发网站,还可以开发手机App,Vue语 ...
 - Go-常识补充-切片-map(类似字典)-字符串-指针-结构体
			
目录 Go 常识补充 Go 命名 打印变量类型科普 _ 关键字 命名规范相关 包目录规范 切片 多维切片 切片初始化的方法 多维切片初始化 切片删除元素(会略微影响效率 ,少用) copy 函数 打散 ...