Gọi Hàm JavaScript Với Thymeleaf - Techmaster

Gọi hàm JavaScript với Thymeleaf

Bài viết này được dịch bài : Trần Anh Tuấn - Học viện lớp java07Email liên hệ : tanhtuan093@gmail.comBài viết gốc : https://www.baeldung.com/thymeleaf-js-function-call

1. Tổng quát

Trong hướng dẫn này, chúng ta sẽ gọi các hàm JavaScript trong một template Thymeleaf.

Chúng ta sẽ bắt đầu bằng cách thiết lập các dependency của chúng ta. Sau đó, chúng ta sẽ thêm bộ điều khiển Spring và template Thymeleaf của chúng ta. Cuối cùng, chúng ta sẽ giới thiệu các cách gọi một hàm JavaScript dựa trên các đầu vào của nó.

2. Thiết lập

Để sử dụng Thymeleaf trong ứng dụng của chúng ta, hãy thêm phần dependency Thymeleaf Spring 5 vào cấu hình Maven của chúng ta:<dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> <version>3.0.11.RELEASE</version> </dependency>

Sau đó, hãy thêm cái này vào bộ điều khiển Spring của chúng ta dựa trên mô hình Student của chúng ta:@Controller public class FunctionCallController { @RequestMapping(value = "/function-call", method = RequestMethod.GET) public String getExampleHTML(Model model) { model.addAttribute("totalStudents", StudentUtils.buildStudents().size()); model.addAttribute("student", StudentUtils.buildStudents().get(0)); return "functionCall.html"; } }

Cuối cùng, chúng ta thêm hai hàm JavaScript này vào mẫu functionCall.html của chúng tôi trong src / main / webapp / WEB-INF / views:<script th:inline="javascript"> function greetWorld() { alert("hello world") } function salute(name) { alert("hello: " + name) } </script>

Chúng ta sẽ sử dụng hai hàm đó để minh họa các ví dụ của chúng ta trong phần tiếp theo bên dưới.Nếu có bất kỳ sự cố nào, chúng ta luôn có thể kiểm tra cách thêm JavaScript vào Thymeleaf.

3. Gọi các hàm JavaScript bên trong Thymeleaf

3.1. Sử dụng các chức năng mà không cần đầu vào

Đây là cách chúng ta gọi hàm welcomeWorld ở trên:<button th:onclick="greetWorld()">using no variable</button>

Nó hoạt động cho bất kỳ chức năng JavaScript tùy chỉnh hoặc được tích hợp sẵn nào.

3.2. Sử dụng các chức năng với đầu vào tĩnh

Nếu chúng ta không cần bất kỳ biến động nào trong hàm JavaScript, thì đây là cách gọi nó:<button th:onclick="'alert(\'static variable used here.\');'">using static variable</button>

Điều này thoát khỏi các dấu ngoặc kép và không yêu cầu SpringEL.

3.3. Sử dụng các chức năng với đầu vào động

Có bốn cách sử dụng để gọi một hàm JavaScript với các biến.

Cách đầu tiên để chèn một biến là sử dụng các biến nội tuyến:<button th:onclick="'alert(\'There are exactly ' + ${totalStudents} + ' students\');'">using inline dynamic variable</button>

Một tùy chọn khác là gọi hàm javascript:<button th:onclick="'javascript:alert(\'There are exactly ' + ${totalStudents} + ' students\');'">using javascript:function</button>

Cách thứ ba là sử dụng các data attributes:<button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>

Phương pháp này hữu ích khi gọi các sự kiện JavaScript, như onClick và onLoad.

Cuối cùng, chúng ta có thể gọi hàm chào bằng cú pháp dấu ngoặc vuông kép:<button th:onclick="salute([[${student.name}]])">using double brackets</button>

Biểu thức giữa dấu ngoặc vuông kép được coi là biểu thức nội dòng trong Thymeleaf. Đó là lý do tại sao chúng ta có thể sử dụng bất kỳ loại biểu thức nào cũng hợp lệ trong thuộc tính th: text.

4. Kết luận

Trong hướng dẫn này, chúng ta đã học cách gọi các hàm JavaScript trong template Thymeleaf. Chúng ta bắt đầu bằng cách thiết lập các dependencies của chúng ta. Sau đó, chúng ta xây dựng controller và template của chúng ta. Cuối cùng, chúng ta đã khám phá các cách để gọi bất kỳ hàm JavaScript nào bên trong Thymeleaf.