首页 其他开发 如何使用 Thymeleaf Spring 和更少的代码处理 Twitter Bootstrap 字段
如何使用 Thymeleaf Spring 和更少的代码处理 Twitter Bootstrap 字段
[英] How to handle Twitter Bootstrap fields with Thymeleaf Spring and less code
本文介绍了如何使用 Thymeleaf Spring 和更少的代码处理 Twitter Bootstrap 字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要一些建议，如何使用 Thymeleaf 处理 Twitter Bootstrap 字段的推荐方法.我知道推荐不是那么容易，所以我写了我的想法，希望你能评论.最后有一些具体的问题.首先，我尝试了一个片段，它显示了生成所需的内容
<div class="控制组"th:classappend="${#fields.hasErrors('__${fId}__')}?'error'"><label class="control-label" th:for="${fId}"th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">名<div class="控件"><input type="text" th:class="${inputclass}" th:field="*{__${fId}__}" th:disabled="${disabled}"/><span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"th:errors="*{__${fId}__}"></span>
可以与
一起使用
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:删除=标签"><label class="control-label replace">Benutzer-Id</label><div class="控件替换"><input type="text" value=""/>
或者简而言之
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:删除=标签"/>输入不是很灵活，所以你需要一个复选框一个自己的片段.
接下来我选择布局方法:
<div class="control-group" th:classappend="${#fields.hasErrors('__${fId}__')}?'error'"><label class="control-label" th:for="${fId}"th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">名字</label><div class="控件"><span layout:fragment="bsinput" th:remove="tag"><input type="text" class="replace" th:field="*{__${fId}__}" th:disabled="${disabled}"/></span><span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"th:errors="*{__${fId}__}"></span>
这非常灵活，因为我可以直接定义我的输入.
我可以很快使用它
<div layout:fragment="bsinput"><input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
或更多原型风格
<div class="control-group" layout:include="templates::bsfield" th:with="fId='lastName'" th:remove="标签"><label class="control-label" th:remove="all">Last Name</label><div class="controls" th:remove="tag"><div layout:fragment="bsinput"><input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
这两种变体仍然有很多样板文件.所以我想到了以下受 Playframework helper 启发的解决方案.
并编写一个处理器来创建
<div class="control-group"th:classappend="${#fields.hasErrors('${fId}')}?'error'"><label class="control-label" th:for="${fId}"th:text="#{model.__*{class.simpleName}__.${fId}}+':'">名字</label><div class="控件"><input type="text" th:class="${inputclass}" th:field="*{${fId}}" th:disabled="${disabled}"/><span class="help-inline" th:if="${#fields.hasErrors('${fId}')}"th:errors="*{${fId}}"></span>
并将 ${fId} 替换为本例中的 bsfield 的值firstname".之后 Thymeleaf 应该重新计算它 (setRecomputeProcessorsImmediately (true);) 对于原型我认为有必要编写一个 JS-Solution.
我不确定这是真的聪明还是滥用处理器.此外，我不确定初学者需要多少时间来编写这样的处理器.4 小时还是几天更现实?
如果有人能给我一个提示，我将不胜感激.
解决方案
同时我做到了.作为初学者，您必须计算 4-8 小时，没有 JUnit 测试(测试处理器看起来很困难)、DTD 和编辑器支持.我遇到的最多的问题是在更改属性后很难重用现有节点.这里最好克隆一下.
下次我想我可以在 1 或 2 小时内完成.
体验非常好，你的代码干净而简短.使用 JS-File，您不会失去原型制作体验.
I need some advice how is a recommended way to handle Twitter Bootstrap fields with Thymeleaf. I know that recommendations are not so easy, so I wrote my thoughts about it and hope you can comment it. At the end there a some concrete questions.
First I tried a fragment which shows what is needed to generate
<div th:fragment="textfield">
<div class="control-group"
th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName
</label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
which can be used with
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag">
<label class="control-label replace">Benutzer-Id</label>
<div class="controls replace">
<input type="text" value=""/>
</div>
</div>
or in short
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag"/>
It's not very flexible about the input, so you need for a checkbox an own fragment.
Next I choose the layout-approach:
<div layout:fragment="bsfield">
<div class="control-group" th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName </label>
<div class="controls">
<span layout:fragment="bsinput" th:remove="tag">
<input type="text" class="replace" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</span>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
Which is very flexible because I can define my input directly.
I can use it shortly with
<div layout:include="templates::bsfield" th:with="fId='firstName'" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
or more prototype style
<div class="control-group" layout:include="templates::bsfield" th:with="fId='lastName'" th:remove="tag">
<label class="control-label" th:remove="all">Last Name</label>
<div class="controls" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
</div>
Both variants has still a lot of boilerplate. So I think about the following solution inspired by Playframework helper.
<input type="text" th:bsfield="firstName" th:disabled="${disabled}"/>
and writing a Processor which creates
<div class="control-group"
th:classappend="${#fields.hasErrors('${fId}')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.${fId}}+':'">
FirstName </label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{${fId}}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('${fId}')}"
th:errors="*{${fId}}"></span>
</div>
</div>
and replace ${fId} with the value of bsfield in this example "firstname". After that Thymeleaf should recompute it (setRecomputeProcessorsImmediately (true);) For the prototype I think it's necessary to write a JS-Solution.
I'm unsure if this is really clever or a misuse of Processors. Furthermore I'm unsure how much time a beginner need to write such a processor. Are 4 hours realistic or more a few days?
Would appreciate if someone can give me a hint.
解决方案
In the meantime I did it. As a beginner you must calculate 4-8 hours, without JUnit tests (it looks difficult to test processors) and DTD and editor-support. The most problems I had was that it's difficult to reuse an existing node after changing attributes. Here it's better to clone it.
Next time I think I can do it in 1 or 2 hours.
The experience is very good, you have clean and short code. With the JS-File you don't lose the prototyping experience.
这篇关于如何使用 Thymeleaf Spring 和更少的代码处理 Twitter Bootstrap 字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
