发表新帖
发表新帖

Thymeleaf + spring dynamic replace

后端 未结
关注
5 1785
花落未央
花落未央 2021-02-06 00:47

Is it possible to create a dynamic replace in Thymeleaf?

I have the following controller:

@Controller
public class LoginController {

    @RequestMapping
相关标签:
5条回答
  • 灰色年华
    2021-02-06 01:12

    I believe the appropriate method to manage this behavior in thymeleaf is to use layout:fragment tags. Please correct me if I'm wrong. Here is a simple example of my layout page, and the login page which is 'dynamically' loaded:

    layout.html

    <html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
<div>
    <div class="app-container">
        <div th:fragment="content">
        </div>
    </div>
</div>
<div th:fragment="script"></div>
</body>
</html>

    Then, when login gets loaded, it replaces the th:fragment div with the associated div in the html view which matches the string returned by the controller method, in this case login.html:

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorator="layout">
<head>
    <title>Login</title>
</head>
<body>
<div th:fragment="content">
    <form th:action="@{/login}" method="post">
        <div><label> User Name : <input type="text" name="username"/> </label></div>
        <div><label> Password: <input type="password" name="password"/> </label></div>
        <div><input type="submit" value="Sign In"/></div>
    </form>
</div>
</body>
</html>

    Now, if you want to load another fragment conditionally, the approach I take is to add replace tags with th:if cases. Here's an example of a Form that displays different questions based on an attribute of the current user:

    <div th:if="${foo.type)} == 'type_1'">
    <div th:replace="fragments/custom-questions :: type-1-checkboxes"></div>
</div>
<div th:if="${foo.type} == 'type_2'">
    <div th:replace="fragments/custom-questions :: type-2-checkboxes"></div>
</div>

    Then the associated div gets loaded from the file custom-questions.html:

    <div th:fragment="type-1-checkboxes">
  //stuff
</div>

<div th:fragment="type-2-checkboxes">
  //stuff
</div>
    0 讨论(0)
  • 梦谈多话
    2021-02-06 01:12

    Although Joe Essey's solution is working as well i solved with following code:

    <div th:replace="@{'fragments/' + ${template}} :: ${template}"></div>
    0 讨论(0)
  • 隐瞒了意图╮
    2021-02-06 01:16

    In Thymeleaf 3.0, the following solution has worked for me:

    <div th:replace="('fragments/' + ${template}) :: (${template})">

    (Note however, that I use it with fixed name of the fragment and dynamic name of the template, so the parantheses around :: (${template}) might be optional.)

    The solution is inspired by documentation for Thymeleaf in https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#fragment-specification-syntax

    Both templatename and selector in the above examples can be fully-featured expressions (even conditionals!) like: <div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div> Note again how the surrounding ~{...} envelope is optional in th:insert/th:replace

    0 讨论(0)
  • 醉话见心
    2021-02-06 01:22

    I am just encountering this issue (this is my first time with thymeleaf/spring). This is what solved it for me:

    <div class="col-md-12" th:include="__${template}__ :: body" ...
    0 讨论(0)
  • 广开言路
    2021-02-06 01:30 
    <div th:insert=“${subpage}::fragementName”>

    Just change subpage names and you will dynamic behaviour in thymleaf

    0 讨论(0)
 看不清?
提交回复
热议问题