用胸腺渲染动态标签名称

发布于 2025-02-09 08:57:11 字数 603 浏览 1 评论 0原文

有没有办法渲染模板中标签名称不变的标签？我想产生标题H1，h2，...或h6，取决于页面模型的某些属性模板：

<h1 th:text="${model.title}" th:if="${model.level == 1}"></h1>
<h2 th:text="${model.title}" th:if="${model.level == 2}"></h2>
<h3 th:text="${model.title}" th:if="${model.level == 3}"></h3>
<h4 th:text="${model.title}" th:if="${model.level == 4}"></h4>
<h5 th:text="${model.title}" th:if="${model.level == 5}"></h5>
<h6 th:text="${model.title}" th:if="${model.level == 6}"></h6>

这可以以更聪明的方式完成吗？

原文

Is there a way to render a tag with a tag name that is not constant in the template? I want to produce a heading tag h1, h2, ..., or h6 depending on some attribute of the page model like in the following template:

<h1 th:text="${model.title}" th:if="${model.level == 1}"></h1>
<h2 th:text="${model.title}" th:if="${model.level == 2}"></h2>
<h3 th:text="${model.title}" th:if="${model.level == 3}"></h3>
<h4 th:text="${model.title}" th:if="${model.level == 4}"></h4>
<h5 th:text="${model.title}" th:if="${model.level == 5}"></h5>
<h6 th:text="${model.title}" th:if="${model.level == 6}"></h6>

Can this be done in a more clever way?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

方圜几里 2025-02-16 08:57:11

您可以使用th：utext来输出UNESCAPED HTML。因此，类似这样的事情可以例如：

<th:block th:utext="|<h${model.level}>${model.title}</t${model.level}>|">

但是，胸腺层不是为此用例设计的 - 将Unexaped HTML放入模板中是错误的，并且具有安全含义（尤其是如果您要使用用户输入），并且模板为现在很难阅读。

我建议将您的原始百里香叶放入片段中，然后使用它。

HTML：

<th:block th:replace="index :: title(level=${model.level}, title=${model.title})" />

片段：

<th:block th:fragment="title(level, title)">
  <h1 th:text="${title}" th:if="${level == 1}"></h1>
  <h2 th:text="${title}" th:if="${level == 2}"></h2>
  <h3 th:text="${title}" th:if="${level == 3}"></h3>
  <h4 th:text="${title}" th:if="${level == 4}"></h4>
  <h5 th:text="${title}" th:if="${level == 5}"></h5>
  <h6 th:text="${title}" th:if="${level == 6}"></h6>
</th:block>

You can use th:utext to output unescaped html. So something like this would work for example:

<th:block th:utext="|<h${model.level}>${model.title}</t${model.level}>|">

However, Thymeleaf wasn't really designed for this use case -- putting unescaped HTML into your templates is error prone and has security connotations (especially if you are taking in user input) and the template is hard to read now.

I would recommend just putting your original Thymeleaf into a fragment and using that.

HTML:

<th:block th:replace="index :: title(level=${model.level}, title=${model.title})" />

Fragment:

<th:block th:fragment="title(level, title)">
  <h1 th:text="${title}" th:if="${level == 1}"></h1>
  <h2 th:text="${title}" th:if="${level == 2}"></h2>
  <h3 th:text="${title}" th:if="${level == 3}"></h3>
  <h4 th:text="${title}" th:if="${level == 4}"></h4>
  <h5 th:text="${title}" th:if="${level == 5}"></h5>
  <h6 th:text="${title}" th:if="${level == 6}"></h6>
</th:block>

回复收藏 0 原文

裂开嘴轻声笑有多痛 2025-02-16 08:57:11

这样的事情可能会起作用，但我怀疑它更可读性，因此我不建议这样做。由于对未来开发的调试可能比输入所有IF（或开关）更麻烦。

<h1 id="placeholder">PLACEHOLDER<h1>

<script th:inline="javascript">
let element = /*[['h' + ${model.level}]]*/ "";
let $header = $(document.createElement(element));
$("#placeholder").replaceWith($header);
</script>

请记住，这只是模拟代码，它可能有一些错别字，但是这个想法应该正确

Something like this would probably work but i doubt it be more readable and as such i would not recommend doing so. As debugging for a future dev might be more trouble than typing out all the ifs (or a switch) is.

<h1 id="placeholder">PLACEHOLDER<h1>

<script th:inline="javascript">
let element = /*[['h' + ${model.level}]]*/ "";
let $header = $(document.createElement(element));
$("#placeholder").replaceWith($header);
</script>

Do keep in mind that this is just mock code, it might have some typos but the idea should be correct

回复收藏 0 原文

~没有更多了~