百里香复合组件

Question

有没有使用Thymeleaf制作复合组件（比如在JSF中）的方法？我发现如何将参数发送到可以使用表达式语言检索的片段。但我还没有想出如何发送标记碎片，就像你可以在JSF中。

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

<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> 

Answer 1

你可以做这样的事情：

但你必须写所有菜单容器属性，每次使用它的页面。

我真的不喜欢这种方式，但我认为它应该工作：对

模板：

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

页：

<div class="menu"> 
    <div th:include="template :: menu" 
     th:remove="tag" 
     th:with="menuItem1=item1, menuItem2:item2, menuItem3:item3" /> 
    <more markup/> 
</div> 

Answer 2

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

有了这个话，你可以写组件是这样的：

与<tc:content/>标签

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

使用的组件创建一个组件（一thymeleaf片段）

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

结果将是

<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> 

方言是新的，仍处于阿尔法状态。欢迎反馈。