Tech&W_techRoad_web_UI_thymeleaf

2019-12-05

---

---

official web site :

 https://www.thymeleaf.org/documentation.html

 http://itutorial.thymeleaf.org/

 

ref : 

1. 内联 https://www.cnblogs.com/lmsblogs/p/11386800.html

1. layout 布局

layout 封装 common 页面部分

th:insert -> 保留自己的主标签， 保留 th:fragment的主标签。

th:replace -> 不要自己的主标签， 保留th:fragment 的主标签。

th:include -> 保留自己的主标签，不要 th:fragment的主标签。 V3.0后不推荐。

 

js 要取得 Thymeleaf 标签参数需要特定的语法 [[ ]]

 

thymeleaf 模板引擎为前端获取数据:

html : th标签加 $ { } 表达式访问 model 里的对象数据

JS 代码块里访问 model 中的数据。

内联解释：

<p>Hello, [[ ${session.user.name} ]] !</p>

替换为：

<p>Hello, <span th:text="${session.user.name}">Msg</span>!</p>

在 Javascript 代码块内直接地使用model的对象值， 必须通过内联来实现

1 <script type="text/javascript" th:inline="javascript">
2         /*<![CDATA[*/
3         var message = /*[[${login.user.name}]]*/ 20;
4         alert(message);
5         /*]]>*/
6 </script>

 第2行和第5行 基于XML 的转义写法，

第3行把内联访问的语句用注释引起来，且后面跟一个空格20， 是指若不存在此对象，则自动设置默认值为20

 

另外一种方式获取 model 对象

  <input type="hidden" id="userInfo" th:value="${userInfo.id}"/>
    
    <script type="text/javascript" th:inline="none">
        var  max= $("#userInfo").val();
        var data = [["2019-12-05",6],["2019-12-",3]];
        alert(max);
        alert(data);
    </script>

1 声明了一个hidden input, 第4行通过 jQuery 间接访问。

如果 thymeleaf 代码里存在 第5行的 二维数组字面量的写法， 必须把 javascript 代码块设置为 none, 

否则 thymeleaf 引擎会把此数组的 [[ 也当成内联语句处理， 从而导致后端报错 

An error happened during template parsing.

 

另外： 通过 ajax 直接获取内容来实现。 但与 thymeleaf 模板引擎计算过程无关。

 

 

---

---

JS 在 子页面中的使用，

如果是在替换的部分内加入 内联的 Javascript 脚本是可以工作的。但仅作为功能性验证使用。

 

---

---

 

2019-12-16 

todo : 解决 layout 布局页存在JS 引用， 需要将模板引用的其他 JS 文件全部写到此JS前面，及时使用到了 

layout.html 中已经引用的 jQuery.js 文件，也需要将其重新再引入一遍，且必须将 js 文件写进 <div layout:fragment = "content" > 文件内

验证结果 ， 未成功，try again next time.

 

---

---

2020-05-01

使用 thymleaf 的两种重用方式

1. 组合 fragement .

2. layout  th:replace  th:insert .

但两种方式在进行 JS, CSS 的复用时，根据官方文档及网上资料，发现均需要在 母版和 子页面重复引用.

https://github.com/thymeleaf/thymeleafexamples-layouts

https://www.thymeleaf.org/doc/articles/layouts.html

待后续是否有更便捷方式。