thymeleaf

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();
+}
+```
+