thymeleaf的内联th：inline（在javascript访问model中的数
据）
范培忠 2018-05-02
  thymeleaf模板引擎为前端数据的获取提供了较⼤的便利，在html标签内可通过th标签加${}表达式访问model⾥的对象数据。但如果不想通过th标签⽽是简单地访问model对象数据，或是想在javascript代码块⾥访问model中的数据，则要使⽤内联的⽅法。
  ⽐如，我们可以这样访问对象：
thyme<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模板引擎计算过程⽆关了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。