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模板引擎计算过程无关了。

  • 相关阅读:
    119. Pascal's Triangle II
    118. Pascal's Triangle
    112. Path Sum
    111. Minimum Depth of Binary Tree
    110. Balanced Binary Tree
    108. Convert Sorted Array to Binary Search Tree
    88. Merge Sorted Array
    83. Remove Duplicates from Sorted List
    70. Climbing Stairs
    陌陌面试经历
  • 原文地址:https://www.cnblogs.com/lmsblogs/p/11386800.html
Copyright © 2011-2022 走看看