Thymeleaf 模板引擎技术

最新推荐文章于 2024-09-29 11:25:09 发布

weixin_30488085

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/quanxi/p/7264187.html

版权

引入Thymeleaf：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>Index</title>
</head>
<body>
Welcome!
</body>
</html>

引用Web静态资源：

<link th:href="@{bootstrap/css/bootstrap.css}" rel="stylesheet"/>
<link th:href="@{bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>

访问model（${}）：

<div class="panel-body">
    <span th:text="${person.name}"></span>
    <span th:text="${person.age}"></span>
</div>

model迭代访问（th:each指令进行迭代，person为迭代元素，${people}访问people这个model）：

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">访问model列表</h3>
    </div>
    <div class="panel-body">
        <ul class="panel-group">
            <li class="list-group-item" th:each="person:${people}">
                <span th:text="${person.name}"></span>
                <span th:text="${person.age}"></span>
            </li>
        </ul>
    </div>
</div>

数据判断（th:if指令进行判断，支持如 >、< 等类型的比较条件，同时支持SpringEL）：

<div th:if="${not #lists.isEmpty(people)}">内容</div>

在JavaScript中访问model有些不同，形如 [[${}]]。通过th:inline，才可以访问model）：

<script th:inline="javascript">
    $(function () {
        var person = [[${person}]];
        console.log(person.name + "/" + person.age);
    });
</script>