使用片段作为 Thymeleaf 变量到 th:with 和 th:data-content 属性 [英] Using a fragment as a Thymeleaf variable to th:with and a th:data-content attribute

问题描述

我正在做类似以下的事情.这是可能的还是有解决方法?

myFragment.html

一些带有一些业务逻辑的弹出字符串<span th:text="${someObject.property}">[对象属性]</span>

myTemplate.html

<!-- 我将如何纠正此问题以便评估片段?--><div th:with="popoverContent = ${myFragment :: myContent(someObject)}"><a th:data-content="${popoverContent}"></a>

我可以在 th:with 中插入一个片段作为变量吗?我可以在服务器端创建 popoverContent，但我认为可能有更好的方法.

更新:用例的更多细节

我需要带有一些基本数学公式的工具提示来设计样式.

在 myFragment.html 中，我在 th:switch 中有一个带有多个 th:cases 的 HTML table>.每个 td 都有一个带有计算值的工具提示.

工具提示内容类似于我们计算您的自定义比率的方法:((1 + 5)/3) + 1 = 3"，因此我们将其样式设置为更清晰易读.

在服务器端这样做会很麻烦，现在最好的选择是我避免使用 th:fragment 并在每个 th:data-content 中提供逻辑 字段直接在每个 th:case 中.

这看起来是一件小事，但令人惊讶的是它有点令人头疼，因为计算有时会发生变化，因此修改多个位置很容易出错并且是一件苦差事.我们在多个地方总体上做同样的事情.

解决方案

我不知道有什么方法可以将片段作为文本获取，但这里有一种可以使用 jquery 实现的方法:

<脚本>$(函数(){$('#dest').attr('data-content', $('#source').html());});

html 看起来像:

<div id="source" style="display: none;"th:insert="~{popover :: popover}"/>

在 Chrome 的开发人员工具中渲染和检查 html 后，我可以看到:

I'm looking to do something like the following. Is this possible or is there a workaround?

myFragment.html

<div th:fragment="myContent(someObject)">
  Some popover strings with some business logic
  <span th:text="${someObject.property}">[object property]</span>
</div>

myTemplate.html

<!-- how would I correct this so that the fragment is evaluated? -->
<div th:with="popoverContent = ${myFragment :: myContent(someObject)}">    
    <a th:data-content="${popoverContent}"></a>
</div>

Can I insert a fragment within a th:with as a variable? I can create popoverContent server-side, but I'm thinking there's likely a better way.

Update: More Specifics on Use Case

I need tooltips with some basic math formulas to be styled.

In myFragment.html, I have an HTML table with multiple th:cases in a th:switch. Each td has a tooltip with the calculated values.

The tooltip reads something like, "Here is how we calculate your custom ratio: ((1 + 5) / 3) + 1 = 3", so we'd style it to be read more clearly.

It would be messy to do it server-side, and the best alternative right now is that I avoid using a th:fragment and supply the logic in each th:data-content field directly in each th:case.

It seems like a small thing, but it's surprisingly been somewhat of a headache since the calculations can sometimes change, and so modifying multiple places is error-prone and a chore. And we do this same sort of thing overall in multiple places.

解决方案

I don't know of any way to get a fragment as text, but here is one way you could do it with jquery:

<!-- onload -->
<script>
    $(function() {
        $('#dest').attr('data-content', $('#source').html());
    });
</script>

And the html would look something like:

<div id="dest"></div>
<div id="source" style="display: none;" th:insert="~{popover :: popover}" />

After doing rendering and inspecting the html in Chrome's developer tools I can see:

<div id="dest" data-content="<div>Hello, I am a popover</div>"></div>
<div id="source" style="display: none;"><div>Hello, I am a popover</div></div>

这篇关于使用片段作为 Thymeleaf 变量到 th:with 和 th:data-content 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！