#javascript #html #thymeleaf
Вопрос:
В настоящее время я учусь использовать thymeleaf и javascript. Я хочу создать заголовок, и при нажатии на аватар пользователя появится выпадающее меню.
Проблема, с которой я сталкиваюсь, заключается в том, что когда я добавляю <script> тег к своему фрагменту заголовка, когда я нажимаю на кнопку, консоль выдает мне ReferenceError, функция не найдена.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="UTF-8">
</head>
<body>
<header th:fragment="header" class="global-header">
<!-- Logged in show the user's avatar-->
<div class="profile bulge-icon" sec:authorize="isAuthenticated()">
<button class="profile-btn" id="profile-btn" th:onclick="dropdown()">
<img class="img" alt="user profile picture" th:src="@{images/profile-placeholder.png}"/>
</button>
<div id = "dropdown-menu">
<form th:action="@{/logout}" method="post">
<button type = "submit" class="sign out bulge-icon" aria-label="sign out">Sign Out</button>
</form>
</div>
</div>
</header>
<script type="text/javascript" th:src="@{/js/jquery/header.js}"></script>
</body>
</html>
Чтобы заставить этот js работать, мне нужно добавить на мою страницу файл .js, который использует фрагмент заголовка. Например, мой test.html .
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/header.css}"/>
</head>
<body>
<header th:replace="global/header :: header"></header>
<script type="text/javascript" th:src="@{/js/jquery/header.js}"></script>
</body>
</html>
Есть ли способ, позволяющий .js работать, когда <script> тег помещается в мой header.html . Таким образом, мне не нужно добавлять header.js на каждую страницу, использующую фрагмент заголовка.
Ответ №1:
Когда вы используете th:replace , Thymeleaf буквально возьмет содержимое этого <header> элемента и разместит его на вашей главной странице. Эта строка JavaScript в вашем фрагменте заголовка никогда не будет использоваться.
Обычно я справляюсь с этим, используя диалект макета Thymeleaf, чтобы все необходимые теги скрипта были включены на каждой странице. Видишь https://ultraq.github.io/thymeleaf-layout-dialect / для получения информации о том, как его использовать.
Например, создайте такой layout.html файл, как этот:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/header.css}"/>
<div layout:fragment="page-content">
</div>
<script type="text/javascript" th:src="@{/js/jquery/header.js}"></script>
</head>
</html>
Теперь обновите test.html , чтобы использовать его:
<!DOCTYPE html>
<html
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}">
<head>
<title>Test</title>
</head>
<body>
<div layout:fragment="page-content">
<header th:replace="global/header :: header"></header>
<!-- Add more content for the test page here -->
</div>
</body>
</html>
Если заголовок должен быть на всех страницах, вы также можете переместить его внутрь layout.html .
Комментарии:
1. Спасибо! Вы также решили мою путаницу, почему th:replace не работает.