1

我需要一些建议，如何推荐使用 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 helper 启发的解决方案。

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

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

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

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

4

1 回答 1

0

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

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

体验非常好，代码简洁简洁。使用 JS 文件，您不会失去原型设计经验。

于 2013-05-08T09:19:55.737 回答