You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.3 KiB
Markdown
73 lines
1.3 KiB
Markdown
5 years ago
|
# 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();
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|