Question

我需要一些建议如何使用Thymeleaf处理Twitter Bootstrap字段的推荐方法。我知道建议并不那么容易，所以我写了我的想法并希望你能评论它。最后有一些具体的问题。首先，我尝试了一个片段，显示了生成

所需的内容

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

可与

一起使用

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

或简而言之

<div class="control-group  replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag"/>

输入不是很灵活，所以你需要一个自己的片段复选框。

接下来我选择布局方法：

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

这非常灵活，因为我可以直接定义我的输入。

我可以在

中使用它

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

或更多原型样式

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

两种变体仍然有很多样板。所以我想到了Playframework助手启发的以下解决方案。

<input type="text"  th:bsfield="firstName"  th:disabled="${disabled}"/>

并编写一个创建

的处理器

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

并在此示例“firstname”中将${fId}替换为bsfield的值。之后，Thymeleaf应该重新计算它（setRecomputeProcessorsImmediately (true);）对于原型，我认为有必要编写一个JS-Solution。

我不确定这是非常聪明还是滥用处理器。此外，我不确定初学者需要多少时间来编写这样的处理器。几天是4小时还是更多？

如果有人能给我一个提示，我将不胜感激。

Answer 1

与此同时，我做到了。作为一个初学者，你必须计算4-8个小时，没有JUnit测试（看起来很难测试处理器）和DTD和编辑器支持。我遇到的最大问题是在更改属性后很难重用现有节点。克隆它最好。

下次我想我可以在1或2小时内完成。

体验非常好，你有干净简洁的代码。使用JS-File，您不会失去原型制作体验。

如何使用Thymeleaf Spring处理Twitter Bootstrap字段并减少代码

1 个答案: