javascript - 关闭“th:replace”下面的Thymeleaf代码不起作用
问题描述
我正在使用 Spring Boot 和 Thymeleaf,我被困在这个问题上。
我有一个文件**资源/模板/布局/layout.html**
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<!-- <meta charset="UTF-8" /> -->
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<meta id="_csrf" name="_csrf" th:content="${_csrf.token}" />
<meta id="_csrf_header" name="_csrf_header" th:content="${_csrf.headerName}" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="My site">
<meta name="author" content="tercera colina">
<title th:text="'Portal - ' + ${titulo}"></title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
<!-- Favicon -->
<link rel="icon" th:href="@{/assets/img/brand/favicon.png}" type="image/png">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<!-- Icons -->
<link rel="stylesheet" th:href="@{/assets/fonts/nucleo/css/nucleo.css}" type="text/css">
<link rel="stylesheet" th:href="@{/node_modules/@fortawesome/fontawesome-free/css/all.min.css}" type="text/css">
<!-- Datatables -->
<link rel="stylesheet" th:href="@{/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css}">
<link rel="stylesheet" th:href="@{/node_modules/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css}">
<link rel="stylesheet" th:href="@{/node_modules/datatables.net-select-bs4/css/select.bootstrap4.min.css}">
<link rel="stylesheet" th:href="@{/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css}">
<!-- Argon CSS -->
<link rel="stylesheet" th:href="@{/assets/css/argon.min.css?v=1.2.0}" type="text/css">
<!--OPCIONALES-->
<link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}" />
<link rel="stylesheet" th:href="@{/css/selectize.css}" />
<link rel="stylesheet" th:href="@{/css/bootstrap-datepicker.min.css}" />
<!-- ESTILOS PARA RELOJ DE PLANILLA DE ASISTENCIA -->
<link rel="stylesheet" th:href="@{/css/reloj.css}" />
</head>
<body>
<nav th:replace="layout/navs :: primary-nav"></nav>
<!-- Main content -->
<div class="main-content" id="panel">
<!-- Topnav -->
<nav th:replace="layout/navs :: second-nav"></nav>
<!-- Header -->
<div th:fragment="header-form" class="header bg-primary pb-6">
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<h6 class="h2 text-white d-inline-block mb-0" th:text="${titulo}"></h6>
<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
<li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
<li class="breadcrumb-item"><a href="#" th:text="'Listar ' + ${titulo}"></a></li>
<li class="breadcrumb-item active" aria-current="page" th:text="'Nuevo / Editar ' + ${titulo}"></li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer th:fragment="footer" class="footer pt-0">
<div class="row align-items-center justify-content-lg-between">
<div class="col-lg-12">
<div class="copyright text-center text-lg-left text-muted">...</div>
</div>
</div>
</footer>
<th:block th:fragment="layout-scripts">
<!---------------------- CORE JS ---------------------->
<script th:src="@{/node_modules/jquery/dist/jquery.min.js?v=3.4.1}"></script>
<script th:src="@{/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/node_modules/js-cookie/src/js.cookie.js}"></script>
<script th:src="@{/node_modules/jquery.scrollbar/jquery.scrollbar.min.js}"></script>
<script th:src="@{/node_modules/jquery-scroll-lock/dist/jquery-scrollLock.min.js}"></script>
<!---------------------- OPTIONAL JS ---------------------->
<!-- selectize -->
<script th:src="@{/node_modules/selectize/dist/js/standalone/selectize.min.js}"></script>
<!-- bootstrap-datepicker -->
<script th:src="@{/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/js/bootstrap-datepicker.es.min.js}"></script>
<script th:src="@{/js/jquery.spring-friendly.js}"></script>
<script th:src="@{/js/jquery.redirect.js}"></script>
<!-- datatables -->
<script th:src="@{/node_modules/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-buttons/js/dataTables.buttons.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-buttons/js/buttons.html5.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-buttons/js/buttons.flash.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-buttons/js/buttons.print.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-select/js/dataTables.select.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js}"></script>
<!-- autocomplete -->
<script th:replace="layout/js/autocomplete_fecha_off :: javascript"></script>
<!-- recaptcha -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!---------------------- ARGON JS ---------------------->
<script th:src="@{/assets/js/argon.js}"></script>
</th:block>
</body>
</html>
还有我在其中实现片段资源/模板/estamento/listar.html的模板文件:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout/layout :: head"></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<nav th:replace="layout/navs :: primary-nav"></nav>
<div class="main-content" id="panel">
<!-- Topnav -->
<nav th:replace="layout/navs :: second-nav"></nav>
<!-- Header -->
<div th:replace="layout/layout :: header-form"></div>
<!-- Page content -->
<div class="container-fluid mt--6">
<!-- Table -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="mb-0">Datatable</h3>
</div>
<div class="py-4">
<table id="tabla" class="table table-striped table-bordered dt-responsive nowrap w-100">
<thead class="thead-dark"></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer th:replace="layout/layout :: footer" class="footer pt-0"></footer>
</div>
</div>
<th:block th:include="layout/layout :: layout-scripts"></th>
<div class="testing-class" th:text="HOLA"></div>
</body>
</html>
当我编译时,浏览器会呈现我的文件 listar.html 成功替换片段,但该行:
<div class="testing-class" th:text="HOLA"></div>
或以下任何标签(和 除外):
<th:block th:include="layout/layout :: layout-scripts"></th>
它不渲染。
我的错误是什么?
先感谢您。
解决方案
推荐阅读
- r - 列表列数据框中的 purrr pmap
- google-apps-script - Html模板不打印格式或图像到pdf
- magento2 - 如何在所有 magento 2 产品价格中将货币符号更改为上标?
- azure - MS Azure 中是否有类似于 Google Cloud 的代码编辑器
- c# - 在联系人卡片编辑模式下未触发 Outlook 检查器事件
- python - 用 numpy (Python) 填充数组,其中包含一个带有日期时间值的列
- django - Django & Postgres:DB 提供 None 而不是 ""
- spring-boot - 在 Pivotal Cloud Foundry 上设置双向 SSL 身份验证
- swift - 使用外部源(项目数量)动态创建 NSPopUpButton
- swift - 如何使用 Swift 从 Firebase DB 参考路径中删除观察者?