向 Wicket 中的 dom 添加动态元素 ID答案

【问题标题】：Adding dynamic element ids to the dom in Wicket向 Wicket 中的 dom 添加动态元素 ID
【发布时间】：2021-01-20 12:42:39
【问题描述】：

我有一个重复视图，里面有一个容器。另外，我在这个容器中添加了具有行为的元素。

RepeatingView listItems = new RepeatingView("listItems");
    listItems.setOutputMarkupId(true);
    listItems.setRenderBodyOnly(true);
    for (int i = 0; i < typeList.size(); i++) {
        WebMarkupContainer container = new WebMarkupContainer(listItems.newChildId());
        container.setOutputMarkupId(true);
        Label typeLabel = (Label) new Label("typeLabel" + i, "label");
        container.add(typeLabel);
        container.add(createMultiChoiceForCustomType("choice" + i, i));
        listItems.add(container);
    }
    add(listItems);

和 HTML

<div class="otherPermissionsOption">
      <div wicket:id="listItems"></div>
</div>

我在控制台中遇到错误

Wicket.Ajax：无法为元素“id13c”上的事件“change.select2”绑定监听器，因为该元素不在 DOM 中

如何在 HTML 页面上放置动态容器+元素 ID 以消除此错误？ Wicket 中是否可以有动态容器？

【问题讨论】：

标签： java wicket

【解决方案1】：

 listItems.setOutputMarkupId(true);
 listItems.setRenderBodyOnly(true);

这两行是矛盾的。

listItems.setOutputMarkupId(true); 说 - 我希望 Wicket 将 id 属性添加到 HTML 元素并为其生成唯一值

listItems.setRenderBodyOnly(true); 说 - 我不需要 HTML 元素标记（将其所有属性）。我希望 Wicket 仅呈现该组件的子组件。您需要将其删除。

您的标记应包含子级的 HTML 元素：

<div class="otherPermissionsOption">
  <div wicket:id="listItems">
    <span wicket:id="typeLabel"></span>
    <div wicket:id="choice"></div>
  </div>
</div>

并且不需要在Java代码中的组件id中添加+ i。

也不需要在：

... = (Label) new Label("typeLabel" + i, "label");

【讨论】：

所以 setOutputMarkupId(true) 等于我为每个元素生成唯一 ID 的尝试。 Renderbody 只是我解决问题的实验。感谢您的解释，不知道 wicket id 生成。

【解决方案2】：

为未来的挖掘者修复了代码示例

JAVA

    RepeatingView listItems = new RepeatingView("documentAppItemContainer");

    for (int i = 0; i < typeList.size(); i++) {
        WebMarkupContainer documentAppContainer = new WebMarkupContainer(listItems.newChildId());
        WebMarkupContainer documentAppPanel = new WebMarkupContainer("documentAppItem");
        Label typeLabel = new Label("documentAppLabel", "label");
        documentAppPanel.add(typeLabel);
        documentAppPanel.add(createMultiChoiceForCustomType("documentAppSettings", i));
        documentAppContainer.add(documentAppPanel);
        listItems.add(documentAppContainer);
    }
    add(listItems);

HTML

    <div wicket:id="documentAppItemContainer">
        <div wicket:id="documentAppItem">
            <wicket:component wicket:id="documentAppLabel"/>
            <wicket:component wicket:id="documentAppSettings"/>
        </div>
    </div>

【讨论】：