From 657e0940e5a2a551bb7cc896ea21b479565a8c14 Mon Sep 17 00:00:00 2001
From: YIk Teng Hie <tenghie.yik@razer.com>
Date: Sat, 5 Jun 2021 20:35:42 +0800
Subject: [PATCH] thymeleaf

---
 backend/springboot/Thymeleaf.md | 72 +++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 backend/springboot/Thymeleaf.md

diff --git a/backend/springboot/Thymeleaf.md b/backend/springboot/Thymeleaf.md
new file mode 100644
index 0000000..2f86b07
--- /dev/null
+++ b/backend/springboot/Thymeleaf.md
@@ -0,0 +1,72 @@
+# Thymeleaf Quick Guide
+
+
+
+* sample.java
+
+```java
+@Controller
+public class JavascriptController {
+
+  @RequestMapping("/")
+  public String greeting(Model model) {
+    int someReferenceId = 1234;
+    //Deliver Results Array to the DOM
+    model.addAttribute("referenceId", someReferenceId);
+    return "index";
+  }
+}
+```
+
+
+
+* index.html
+  * use thymeleaf syntax `/*[[${...}]]*/`to access the model data
+  * [**JavaScript natural templating**! ](https://attacomsian.com/blog/thymeleaf-set-javascript-variable)
+
+```html
+<!-- model can only be access from html. Thus, have to pass from HERE -->
+<script th:inline="javascript">
+/*<![CDATA[*/
+    // variable used by index.js
+    var referenceId = /*[[${referenceId}]]*/ "12345";
+/*]]>*/
+    .. some other logic here...
+</script>
+<script type="text/javascript" th:src="@{/js/index.js}">
+</script>
+```
+
+
+
+* index.js
+
+```js
+// within js file, can access 'referenceId' dclared in inline script under html
+
+function doSomething() {        
+    $.ajax({
+        type: 'GET',
+        url: '/api/' + referenceId ,
+        contentType: 'application/json',
+        beforeSend: beforeSend
+    })
+}
+```
+
+
+
+* alternative method using `<input>` tag
+
+```html
+<input type="hidden" id="yourId" th:value="${id}"/>
+```
+
+* external javascript file
+
+```js
+function myFunction(){
+ var val = $("#yourId").val();
+}
+```
+