Cómo NO hacer iteraciones anidadas en thymeleaf 3
Escenario
Me han pedido que integre en una nueva aplicación una funcionalidad de otra ya existente. No es la primera vez que me ha tocado hacerlo. Suele ser un trabajo tedioso basado en continuos copia y pega y frecuentes refactorizaciones. Una de la vistas que debo importar en la nueva aplicación muestra una tabla con filas desplegables. Para ello utilizaba, con Thymeleaf, un bucle anidado en la vieja aplicación y bootstrap collapse para mostrar y esconder las filas.|
1 2 3 4 5 6 7 8 9 |
<table> ... <tbody> <tr data-toggle="collapse" th:href="${'.del-' + stat.index}" aria-expanded="false" aria-controls="del-" th:each="country, stat : ${countries}"> <tr th:class="${'del-' + status.index + ' collapse'}" th:each="city : ${country}"> <td th:text="${city.name}"></td> </tr> </tbody> </table> |
Problema
El mismo código en la nueva aplicación no funciona. No se muestran los datos del bucle anidado. Depuro el valor de las variables, en el controlador y la vista, pero sigo sin entender por qué no se muestran los datos del segundo bucle. Sospecho que pueda ser debido a un cambio en la versión de Thymeleaf. En la aplicación antigua está instalada una versión 2.x y en la nueva una 3.x. Pero en la documentación oficial no encuentro nada que explique el cambio de comportamiento del bucle anidado.Solución
Tampoco encuentro la solución en Stackoverflow, pero sí un post que me encamina hacia ella. Un usuario comparte una muestra de su código en la que utiliza el elemento th:block para delimitar parte de la lógica en su plantilla. Falto de ideas decides probar a cambiar el bloque contenedor del segundo bloque, de un tr a un th:block:|
1 2 3 4 5 6 7 8 9 |
<table> ... <tbody> <th:block data-toggle="collapse" th:href="${'.del-' + stat.index}" aria-expanded="false" aria-controls="del-" th:each="country, stat : ${countries}"> <tr th:class="${'del-' + status.index + ' collapse'}" th:each="city : ${country}"> <td th:text="${city.name}"></td> </th:block> </tbody> </table> |