zoukankan      html  css  js  c++  java
  • 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模板引擎计算过程无关了。

  • 相关阅读:
    EXP8
    EXP7
    数据库作业
    windows下如何编译运行龙脉代码
    CVE-2019-6340 Drupal8's REST RCE 漏洞复现
    小黄衫获奖感言
    Exp6 MSF应用基础
    Exp5
    实验一 密码引擎-4-国䀄算法交叉测试(选做)
    2020-2021-2 20175335 丹增罗布 《网络对抗技术》Exp1 PC平台逆向破解
  • 原文地址:https://www.cnblogs.com/lmsblogs/p/11386800.html
Copyright © 2011-2022 走看看