JavaScript行、テンプレート

16255 ワード
Thymeleaf テキストリンク
🔷 JavaScriptインライン
    <script th:inline="javascript">
    var username = [[${user.username}]];
    var age = [[${user.age}]];

  //자바스크립트 내추럴 템플릿
    var username2 = /*[[${user.username}]]*/ "test username";

  //객체
    var user = [[${user}]];
 
  // each
    [# th:each="user, stat : ${userList}"]
    var user[[${stat.count}]] =[[${user}]];
    [/]
  </script>
🔸テキストをレンダリングするとき
インライン使用前:var username=userA;(レンダリング後も変数名は変更されません)
インライン使用後:var username="userA";(変数名ではなくuserAとしてレンダリング)
🔸 JavaScriptナチュラルテンプレート
タイムラインはHTMLファイルを直接開くことができます.->インライン機能を使用して、コメントを使用できます.
インライン使用前:var username 2=/userA/「test username」;(注釈レンダリング時にグラフィックを解釈)
インライン使用後:var username 2="userA";(コメントが消えて「userA」が適用される)
🔸 オブジェクト
オブジェクトをJSONに自動的に変換します.
行で使用する前:var user=BasicController.User(username=userA, age=10); (toString()を呼び出す値)
インライン使用後:varuser={"username":"userA","age":10};
🔷 かたわく
🔸 Webページで使用されている共通領域のコピーと使用は、かなり非効率です.
効率的に作業できるようにするには、勘定科目のテンプレートのスカルプト、レイアウト機能を使用します.
<footer th:fragment="copy">
    이곳은 footer자리 
</footer>

<footer th:fragment="copyParam(param1, param2)">
    <p>파라미터</p>
    <p th:text="${param1}"></p>
    <p th:text="${param2}"></p>
</footer>
🔹 テンプレートセグメント
<h2>부분포함 insert</h2>
<div th:insert="~{template/fragment/footer :: copy}"></div> // 현재 div태그 안에 추가된다.

<h2>부분포함 replace</h2>
<div th:replace="~{template/fragment/footer :: copy}"></div> // div태그를 대체한다.(div태그 사라짐)

<h2>부분포함 단순표현식</h2>
<div th:replace="template/fragment/footer :: copy"></div>

<h2>파라미터 사용</h2>
<div th:replace="~{template/fragment/footer :: copyParam('data1', 'data2')}"> </div>
// 파라미터를 통해 동적으로 렌더링할 수 있다.
🔹 テンプレートレイアウト
🔸 テンプレートフラグメントがコードの一部で使用されている場合は、コードフラグメントをレイアウトで使用する方法に移行します.
--- base ---
<head th:fragment="common_header(title, links)">
<meta charset="UTF-8">
<title th:replace="${title}">레이아웃 타이틀</title>

<!-- 공통부분 -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>

<!-- 추가하는 부분 -->
<th:block th:replace="${links}"/>


--- Main ---
<head th:replace="template/layout/base :: common_header(~{::title}, ~{::link})"> 
// ::title : 현재 페이지의 title태그들을 전달, ::link : 현재 페이지의 link태그들을 전달
<meta charset="UTF-8">
<title>메인 타이틀</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
<body>
메인 컨텐츠
</body>
結果
<!DOCTYPE html>
<html>
<head>
<title>메인 타이틀</title>

<!-- 공통 -->
<link rel="stylesheet" type="text/css" media="all" href="/css/awesomeapp.css"> 
<link rel="shortcut icon" href="/images/favicon.ico">
<script type="text/javascript" src="/sh/scripts/codebase.js"></script>

<!-- 추가 -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/themes/smoothness/jquery-ui.css">
</head>
<body>
  메인 컨텐츠 
</body>
</html>
ААААААААААААААА\104
さらに拡張すると、全体に適用できます.
誰が雇いますか.(2019年3月現在)
CSS位置値に応じて幅と高さの値を設定します(Feat.z-index)