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