工作中的技术总结_Thymeleaf插件_关于th:if 、th:with、th:replace和th:fragment的一些事 _20210825

工作中的技术总结_Thymeleaf _20210825

1.值取为空的情况：不能使用 th:if 进行条件渲染（因为是伪条件渲染，不管怎样元素都是先渲染到DOM再决定是否显示：个人这么认为不一定准确）可以使用带有问号的表达式 如下：

<input type="text" name="menuName" disabled th:value="${result?.data?.menuName}" class="layui-input">
<!--使用result?中的？进行处理。。-->

2.局部变量,th:with能定义局部变量:

<div th:with="firstPer=${persons[0]}">
  <p>
    The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
  </p>
</div>

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文,以便它是用于评估和其他上下文中声明的变量从开始,但只有包含< div >标记的范围内。

<div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">
  <p>
    The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
  </p>
  <p>
    But the name of the second person is 
    <span th:text="${secondPer.name}">Marcus Antonius</span>.
  </p>
</div>

th:width属性允许重用变量定义在相同的属性:

<div th:with="company=${user.company + ' Co.'},account=${accounts[company]}">...</div>

项目中的例子：

<td style="background-color: #D0D0D0;" rowspan="2">
    <div id="patternFileUpload" class="uploadFile" data-type="single" data-code="MM060"
         style="width:300px;"
         th:with="files=*{fileName}, fieldName='fileName', tempFiles=*{patternFileNameValue}, tempFieldName='patternFileNameValue'">
        <div th:replace="common/upload :: uploadFragment"></div>
    </div>
</td>

此处使用了一个模板语法

完整代码如下

<td style="background-color: #D0D0D0;" rowspan="2">
    <div id="patternFileUpload" class="uploadFile" data-type="single" data-code="MM060"
         style="width:300px;"
         th:with="files=*{fileName}, fieldName='fileName', tempFiles=*{patternFileNameValue}, tempFieldName='patternFileNameValue'">
        <div th:fragment="uploadFragment">
    <style>
      .upload-block {
        position: relative;
        text-decoration: none;
        width:100%;
      }

      .add-btn {
        float:left;
      }

      .pull-file {
        border: 1px solid #999;
        width: 80%;
        color: #4a4846;
        background: #dedddc;
        padding: .20rem .5rem;
        margin-left: 50px;
        display: block;
      }
      
      .input-file {
        opacity: 0; 
        width:100%;
        position: absolute;
        overflow: hidden;
        right: 0;
        top: 0;
      }
      input[type=file]::-webkit-file-upload-button{
	    cursor:pointer;
      }
    </style>
    <div class="fileNameSpan" th:data-field_name="${fieldName}" th:data-temp_field_name="${tempFieldName}" th:id="'request-upload-' + ${screenType}">
      <div th:if="${files != null and files.length > 0}">
        <div th:each="fileName, stat : ${files}" class="old-line">
          <span th:text="${#strings.substring(fileName, fileName.lastIndexOf(FILE_SEPARATOR) + 1)}"></span>
          <a class="btn btn-flat-dark btn-sm" th:href="@{/common/download?(fileName=${fileName})}">
            <i class="fj-icon fj-icon-download align-middle"></i>
          </a>
          <button type="button" class="btn btn-flat-dark btn-sm remove-conditions">
            <i class="fj-icon fj-icon-remove align-middle"></i>
          </button>
          <input type="hidden" th:name="${fieldName+'[' + stat.index +']'}" th:value="${fileName}">
        </div>
      </div>
      <div th:if="${tempFiles != null and tempFiles.length > 0}" >
        <div th:each="tempFile, stat : ${tempFiles}" th:if="${!#strings.isEmpty(tempFile)}" class="new-line">
          <span th:text="${#strings.substring(tempFile,33)}" ></span>
          <button type="button" class="btn btn-flat-dark btn-sm remove-conditions">
            <i class="fj-icon fj-icon-remove align-middle"></i>
          </button>
          <input type="hidden" th:name="${tempFieldName + '[' + stat.index +']'}" th:value="${tempFile}">
        </div>
      </div>
    </div>
    <div class="upload-block"> 
      <span class="btn btn-sm btn-primary add-btn">追加</span>
      <span class="pull-file">点击获取文件</span>
      <input type="file" name="formFile" class="input-file" style="cursor:pointer;">
    </div>
  </div>
    </div>
</td>

这里的功能是实现从后端获取文件名或者路径列表并枚举出来，还提供了追加文件的功能，具体的没有仔细看。

3.

thymeleaf 模板语法

对代码块进行命名即可引用，命名方法如下

<div th:fragment="uploadFragment">……</div>
<!--th:replace 需要 与 th:fragment 联合使用，一个用于引用模板，一个用于命名模板 例子在第2点-->