关键词搜索

源码搜索 ×
×

thymeleaf中片段(fragment)使用调用页内容

发布2020-01-14浏览1862次

详情内容

我终于知道在thymeleaf中,一个公用片段,如何使用调用它的页面上的内容了。

将页面上一些公用、独立的东西制作成片段,然后供其他页面按需要、层次式地引用,一般来说,已经满足大部分的需求。

但是有些还不够。比如想做一些容器类的片段:这个片段是一个容器,它只有外层一些东西是公用的,里面的内容,可能对于不同的页面,就是不同的,如图所示:
在这里插入图片描述
对于这个容器来说,如何将调用页面上的个性化内容放到它里面去呢?

通过参数传过去。

片段页:search.html

<!--/* 容器 */-->
<block th:fragment="container(detail)" >
    <div>
        <div class="area-btn">
            <th:block th:include="::button" />
        </div>
        <div class="area-detail">
            <th:block th:replace="${detail}" />
        </div>
    </div>
</block>

<!--/* 查找按钮 */-->
<block th:fragment="button" >
    <input type="submit" id="btnSearch" value="查找" />
    <input type="button" id="btnReset" value="重置" />
</block>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

某调用页:

<th:block th:include="search::container(~{::mydetail})" >
    <block th:fragment="mydetail" >
        <div>Hello World!</div>
        <div>Hello China!</div>
        <span>Hello GuangZhou!</span>
    </block>
</th:block>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

关键是这个符号“~{::}”,代表的是片段。
thymeleaf里的符号:

Variable Expressions: ${...}
Selection Variable Expressions: *{...}
Message Expressions: #{...}
Link URL Expressions: @{...}
Fragment Expressions: ~{...}
  • 1
  • 2
  • 3
  • 4
  • 5

参考资料:

Standard Expression Syntax(标准表达式语法)

Fragment specification syntax(片段规范语法)

相关技术文章

点击QQ咨询
开通会员
返回顶部
×
微信扫码支付
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载