百里香复合成分 [英] Thymeleaf composite components

问题描述

有没有办法使用 Thymeleaf 制作复合组件(如在 JSF 中)?我发现了如何将参数发送到可以使用表达式语言检索的片段.但我还没有想出如何像在 JSF 中那样将标记发送到片段.

例如，我有几个页面的左侧菜单非常相似.我希望能够在我的所有页面上使用单个片段，但传递一些标记以显示在菜单底部.有的页面要在底部显示文字，有的必须要显示文字，例如，实际上比这更复杂.

<a th:text="${menuItem1}"></a><a th:text="${menuItem2}"></a><a th:text="${menuItem3}"></a><标记作为参数发送/><!-- 我该怎么做?-->
<div th:substitueBy="模板::菜单" th:with="menuItem1=item1, menuItem2:item2, menuItem3:item3"><作为参数发送的标记/><!-- 这不起作用-->

解决方案

我还想创建具有可交换内容的复合组件.这就是我开发 thymeleaf-component-dialect 的原因.

使用这种方言，您可以编写这样的组件:

使用标签

创建一个组件(一个thymeleaf片段)

<a th:text="${menuItem1}"></a><a th:text="${menuItem2}"></a><a th:text="${menuItem3}"></a><tc:content></tc:content>

使用组件

<h1>一些标题</h1><p>Lorem ipsum dolor sat amet</p></tc:menu>

结果是

<a>菜单项 1 文本</a><a>菜单项 2 文本</a><a>菜单项 3 文本</a><h1>一些标题</h1><p>Lorem ipsum dolor sat amet</p>

方言是新的，仍处于 alpha 状态.欢迎反馈.

Is there any way of making composite components (like in JSF) using Thymeleaf? I found out how to send parameters to fragments that can be retrieved using the expression language. But I haven't figured out how to send markup to fragments like you can in JSF.

For example, I have several pages that have very similar menus on the left. I would like to be able to use a single fragment on all my pages, but passing some markup to be displayed at the bottom of the menu. Some pages have to display text at the bottom, some have to display text, for example, it's actually more complicated than that.

<div class="menu" th:frament="menu">
    <a th:text="${menuItem1}"></a>
    <a th:text="${menuItem2}"></a>
    <a th:text="${menuItem3}"></a>
    <markup sent as parameter /> <!-- how do I do this? -->
</div>



<div th:substitueBy="template :: menu" th:with="menuItem1=item1, menuItem2:item2, menuItem3:item3">
    <markup to be sent as parameter /> <!-- this does not work -->
</div>

解决方案

I also wanted to create composite components with exchangeable content. That's why I developed the thymeleaf-component-dialect.

With this dialect, you can write components like this:

Create a component (a thymeleaf fragment) with a <tc:content/> tag

<div th:frament="menu">
    <a th:text="${menuItem1}"></a>
    <a th:text="${menuItem2}"></a>
    <a th:text="${menuItem3}"></a>
    <tc:content></tc:content>
</div>

Use the component

<tc:menu>
    <h1>Some Header</h1>
    <p>Lorem ipsum dolor sit amet</p>
</tc:menu>

The result will be

<div>
    <a>Menu Item 1 Text</a>
    <a>Menu Item 2 Text</a>
    <a>Menu Item 3 Text</a>
    <h1>Some Header</h1>
    <p>Lorem ipsum dolor sit amet</p>
</div>

The dialect is new and is still in alpha state. Feedback is welcome.

这篇关于百里香复合成分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！