feat(wip): refine examples

This commit is contained in:
exaucae 2022-06-17 19:58:12 +00:00
parent 7adea75450
commit 5015fe1d0c
3 changed files with 22 additions and 14 deletions

View File

@ -1,5 +1,6 @@
package com.baeldung.thymeleaf.controller;
import com.baeldung.thymeleaf.utils.StudentUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@ -10,7 +11,8 @@ public class FunctionCallController {
@RequestMapping(value = "/function-call", method = RequestMethod.GET)
public String getExampleHTML(Model model) {
model.addAttribute("num", 2);
model.addAttribute("totalStudents", StudentUtils.buildStudents().size());
model.addAttribute("student", StudentUtils.buildStudents().get(0));
return "functionCall.html";
}
}

View File

@ -0,0 +1,8 @@
function greetWorld() {
alert("hello world")
}
function salute(name) {
alert("hello: " + name)
}

View File

@ -4,25 +4,23 @@
<meta charset="UTF-8" />
<title>Thymeleaf: Javascript function call</title>
</head>
<script type="text/javascript"
src="../js/functionCall.js">
</script>
<body>
<header>
<div> Thymeleaf: Javascript function call </div>
</header>
<main>
<section>
<div>Inline function call</div>
<div>
<header>Without a variable</header>
<button th:onclick="'alert(\'a\');'">Without variable</button>
</div>
<div>
<header>With a variable</header>
<button th:onclick="'alert(\'' + ${num} + '\');'">With variable</button>
</div>
<section class="flex-box">
<button th:onclick="greetWorld()">using no variable</button>
<button th:onclick="'alert(\' 1. static variable used here.\');'">using static variable</button>
<button th:onclick="'alert(\' '1. There are exactly + ${totalStudents} + students'\');'">using inline dynamic variable</button>
<button th:onclick="'javascript:alert(\''2. There are exactly + ${totalStudents} + students'\');'">using javascript:function</button>
<button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>
<button th:onclick="@{'salute(' + ${student.name} + ');'}">using @ tag</button>
<button th:onclick="salute([[${student.name}]])">using double brackets</button>
</section>
</main>
</body>
</html>