Question

我有一个基于Spring MCV 4 + HTML5 + Thymeleaf的应用程序我似乎无法在页面上使用javascript。

webapp结构是：

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>

登录页面有自己的片段，因为它是单个，没有菜单，没有侧边栏页面。所有其他都是。

对于may default templating，我有一个名为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

它将显示文件的内容。

我在这里缺少什么？

Answer 1

感谢您的投入，伙计们！我搞定了。我所做的是将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>

希望这能节省宝贵的时间！

Answer 2

我认为您遇到了问题，因为您的jquery中包含2个fragments/common.html文件（通过Firebug或类似内容查看）：

<head th:id="commonFragment" th:fragment="commonFragment">
      ...
    <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="http://code.jquery.com/jquery-latest.js"></script>
</head>

尝试删除其中一个定义。

Thymeleaf + HTML5 - 为什么我不能访问我的javascripts？

2 个答案: