Erstellen von Menü-Logik mit Thymeleaf

Question

Ich versuche, ein Menü dynamisch mit Grundlogik zu erstellen, etwa so.

• Liste item
  • Liste item
• Liste item
  • Liste Artikel
  • Liste Artikel

ich diesen Code gemacht

<ul> 
    <div data-th-each="field, iter : ${fields}" data-th-remove="tag"> 
     <div data-th-if="${field.text} != null" data-th-switch="${field.href}" data-th-remove="tag"> 
      <li data-th-case="null" data-th-utext="${field.text}" > 
      <li data-th-case="*"><a data-th-href="${field.href}" data-th-utext="${field.text}" ></a> 
     </div> 
       <ul data-th-if="${field}" class="sub-menu"> 
        <div data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-remove="tag"> 
         <div data-th-if="${prop.text} != null" data-th-switch="${prop.href}" data-th-remove="tag"> 
          <li data-th-case="null" data-th-utext="${prop.text}"></li> 
          <li data-th-case="*"><a data-th-href="${prop.href}" data-th-utext="${prop.text}"></a></li> 
         </div> 
        </div> 
       </ul> 
      </li> 
    </div> 
</ul> 

Aber Sie gibt Fehler Parsen, ich denke, es ist vor allem ein Thymeleaf/HTML Problem. Es ist wahrscheinlich wegen der nicht geschlossenen "li" -Tags in der switch-Anweisung, aber ich bin mir nicht sicher, wie es zu beheben ist.

Answer 1

Richtig, es muss HTML vor der Verarbeitung gültig sein. Sie können keine Art von Tricks wie oben beschrieben ausführen, selbst wenn die Ausgabe ein gültiger HTML-Code wäre.

Ich glaube, Sie sollten in der Lage sein, Ihre HTML zu restrukturieren wie folgt aussehen:

<ul> 
    <th:block data-th-each="field, iter : ${fields}" data-th-if="${field.text} != null"> 
     <li> 
      <span data-th-if="${field.href == null}" data-th-utext="${field.text}" /> 
      <a data-th-unless="${field.href == null}" data-th-href="${field.href}" data-th-utext="${field.text}" /> 

      <ul data-th-if="${field}" class="sub-menu"> 
       <th:block data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-if="${prop.text} != null"> 
        <span data-th-if="${prop.href == null}" data-th-utext="${prop.text}" /> 
        <a data-th-unless="${prop.href == null}" data-th-href="${prop.href}" data-th-utext="${prop.text}" /> 
       </th:block> 
      </ul> 
     </li> 
    </th:block> 
</ul> 

Ich habe allerdings nie über die Verwendung von data-th-remove="tag" wie Sie haben. Aber ich denke, dass Sie <th:block> stattdessen für solche Fälle verwenden sollten.