all-in-one/backend/springboot/Thymeleaf.md

Thymeleaf Quick Guide

• sample.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!

<!-- 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

// 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

<input type="hidden" id="yourId" th:value="${id}"/>

• external javascript file

function myFunction(){
 var val = $("#yourId").val();
}