gtl*_*wig 1 html javascript thymeleaf
我有一个基于 Spring MCV 4 + HTML5 + Thymeleaf 的应用程序，我似乎无法在页面上使用 javascript。
网络应用程序的结构是：
webapp
assets
css
img
js
i18n
messages.properties
WEB-INF
html
fragments
common.html
default.html
footer.html
header.html
login.html // exclusively for ../login.html
sidebar.html
home
welcomeSignedIn.html
client
home.html
create.html
在我的登录页面中，由于它是一个单页，背景中只有一张图片，所以我有一段可以完美运行的JS：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
<title><th:text="#{app.name}"></label></th:text>
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="@{/login}" method="post">
<div class="loginbox-title">SIGN IN</div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" placeholder="Username" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="loginbox-forgot">
<a href="">Forgot Password?</a>
</div>
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" value="Login"/>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#ssoId').focus();
});
</script>
</body>
</html>
登录页面有自己的片段，因为它是一个单一的、没有菜单、没有侧边栏的页面。其他都是。
fragments/default.html对于可能的默认模板，我有一个名为负责页面组织的文件。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
因此，对于每个页面，我都会包含以下链接和脚本fragments/common.html：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="commonFragment" th:fragment="commonFragment">
<link rel="icon" th:href="@{/assets/img/favicon.png}" type="image/x-icon" />
<link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/assets/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="@{/assets/css/beyond.min.css}"/>
<link rel="stylesheet" th:href="@{/assets/css/demo.min.css}" />
<link rel="stylesheet" th:href="@{/assets/css/animate.min.css}" />
<link rel="stylesheet" th:href="@{/assets/css/skins/darkred.min.css}" />
<link rel="stylesheet" th:href="@{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script type="text/javascript" src="/assets/js/skins.min.js" th:src="@{/assets/js/skins.min.js}"></script>
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="@{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js" th:src="@{/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js" th:src="@{/assets/js/slimscroll/jquery.slimscroll.min.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.js" th:src="@{/assets/js/beyond.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.min.js" th:src="@{/assets/js/beyond.min.js}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container" />
</body>
</html>
我的fragments/header.html定义为：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment">
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment">
// content
</div>
</body>
</html>
fragments/sidebar.html与`fragments/header.html 非常相似，只是不同的类和内容。
因此，在我的应用程序的每个页面上，我都会执行以下操作：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
// content
</div>
</body
</html>
我确信这是相当愚蠢的事情，但我不明白为什么我不能让 javascript 在我的页面上工作，即使对于像这样简单的事情：
<script type="javascript" >
$(function () {
alert('hello');
});
</script>
而且，令人烦恼（很多！）的是，如果我在浏览器上出现类似以下内容：
localhost:8080/appName/assets/js/bootstrap.min.js
它将显示文件的内容。
我在这里缺少什么？
谢谢你们的意见，伙计们！我成功了。我所做的是将 JavaScript 部分放置在该区域内<div layout:fragment="content">*HERE*</script>，如下例所示。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
<script type="text/javascript" >
*JavaScript area*
</script>
// content
</div>
</body
</html>
希望这能节省某人的宝贵时间！
| 归档时间： |
|
| 查看次数： |
2611 次 |
| 最近记录： |