feat(wip): refine examples
This commit is contained in:
parent
7adea75450
commit
5015fe1d0c
|
@ -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";
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
function greetWorld() {
|
||||
alert("hello world")
|
||||
}
|
||||
|
||||
function salute(name) {
|
||||
alert("hello: " + name)
|
||||
}
|
|
@ -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>
|
Loading…
Reference in New Issue