Question

我正在尝试使用基本逻辑动态创建菜单，就像这样。

列出项目
- 列表项
列出项目
- 列表项
- 列表项

我制作了这段代码

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

但它返回解析错误，我认为它主要是Thymeleaf / HTML问题。这可能是因为switch语句中未关闭的“li”标签，但我不确定如何修复它。

Answer 1

是的，在处理之前必须是有效的html。你不能像上面那样做任何类型的技巧，即使输出是有效的html。

我认为你应该能够重构你的html看起来像这样：

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

我从来没有像你一样使用data-th-remove="tag"。但我认为您应该使用<th:block>代替此类案例。

使用Thymeleaf创建菜单逻辑

1 个答案: