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; package com.baeldung.thymeleaf.controller;
import com.baeldung.thymeleaf.utils.StudentUtils;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.ui.Model; import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMapping;
@ -10,7 +11,8 @@ public class FunctionCallController {
@RequestMapping(value = "/function-call", method = RequestMethod.GET) @RequestMapping(value = "/function-call", method = RequestMethod.GET)
public String getExampleHTML(Model model) { 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"; 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" /> <meta charset="UTF-8" />
<title>Thymeleaf: Javascript function call</title> <title>Thymeleaf: Javascript function call</title>
</head> </head>
<script type="text/javascript"
src="../js/functionCall.js">
</script>
<body> <body>
<header> <header>
<div> Thymeleaf: Javascript function call </div> <div> Thymeleaf: Javascript function call </div>
</header> </header>
<main> <main>
<section> <section class="flex-box">
<div>Inline function call</div> <button th:onclick="greetWorld()">using no variable</button>
<div> <button th:onclick="'alert(\' 1. static variable used here.\');'">using static variable</button>
<header>Without a variable</header> <button th:onclick="'alert(\' '1. There are exactly + ${totalStudents} + students'\');'">using inline dynamic variable</button>
<button th:onclick="'alert(\'a\');'">Without variable</button> <button th:onclick="'javascript:alert(\''2. There are exactly + ${totalStudents} + students'\');'">using javascript:function</button>
</div> <button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>
<div> <button th:onclick="@{'salute(' + ${student.name} + ');'}">using @ tag</button>
<header>With a variable</header> <button th:onclick="salute([[${student.name}]])">using double brackets</button>
<button th:onclick="'alert(\'' + ${num} + '\');'">With variable</button>
</div>
</section> </section>
</main> </main>
</body> </body>
</html> </html>