Wicket

Question

在我的 Web 应用程序中，我有许多带有组件列表的表单，用户可以动态地 add/remove 这些组件。例如，当输入有关他自己的信息时，用户可能会添加几个包含他 children 姓名的文本字段。每个组件都有一个 remove link，还有一个 add link 用于添加新组件。标记如下所示：

<div>
    <div wicket:id="rows">
        <input type="text" wicket:id="name"/>
        <a wicket:id="remove">Remove</a>
    </div>
    <a wicket:id="add">Add</a>
</div>

其中行是检票口转发器。

输入组件因列表而异（可能是下拉列表或其他内容，可能添加了不同的验证器，等等）但 link 保持不变。它们的标记和逻辑没有变化。因为我的表格中有很多这样的列表，所以我有编造和代码重复。我想要的是在删除那些 links 的同时保留表单中输入组件的标记，如下所示：

<div wicket:id="dynamicList">
    <input type="text" wicket:id="name"/>
</div>

将呈现为带有 add/remove link 的文本字段列表。

我知道我必须在某个地方有 links 的标记，比如自动生成它们或将它们放在面板中或其他东西，我只是不想每次都复制它们。

更新：这是使用 Border 组件的建议解决方案（无效）的标记： ListBorder.html:

<wicket:border>
    <div wicket:id="rows">
        <wicket:body/>
        <a wicket:id="remove">Remove</a>
    </div>
    <a wicket:id="add">Add</a>
</wicket:border>

MyForm.html:

<form wicket:id="form">
    ...
    <div wicket:id="dynamicList">
        <input type="text" wicket:id="name"/>
    </div>
    ...
</form>

Answer 1

我认为您描述的问题有几个不同的方面。首先，您想包装一个输入，以便添加一个 remove link 给它。然后您想重复这个包装的输入。最后，您想在重复输入的末尾附加一个 add link 。最后，您希望将所有内容封装在一个组件中。

首先，将删除 link 添加到输入中。这是您可以使用 Border 的地方。正如您可能推断的那样，它看起来像

<wicket:border>
    <wicket:body/>
    <a wicket:id="remove">Remove</a>
</wicket:border>

然后重复整个边框以实现多个输入并自动删除 links。

就问题的其余部分而言，要实现您想要的确切行为，您可以通过覆盖 Component#onComponentTag() 来实现。您可以手动为 HTML 添加 link like

@Override
protected void onRender() {
    super.onRender();
    Response response = getResponse();
    String url = generateAddUrl();
    response.write("<a href=\"" + url + "\">Add</a>");        
}

生成 URL 的方式很棘手。我不打算介绍它（因为我认为您要求的确切行为是不可行的 - 我稍后会解释原因），但您可以使用 Link#getUrl() 的源代码作为起点点.

或者，您可以编写自己的 Component 实现，它会扫描其标记的正文，然后根据它生成您想要的内容。显然这不是一个快速的解决方案，但如果您所描述的用例足够大，从长远来看可能会更好。

但最终我认为更好的解决方案是 Panel for every type of input (i.e. input, select, etc.) with markup structured the way you want, and providing the necessary markup alterations via wicket behaviors like AttributeAppender 之类的。这当然意味着一些 html 最终会出现在 java 方面，这并不理想，但是这个解决方案会很好用并且可以快速设置。

Wicket - 具有 add/remove 功能的表单组件列表

Wicket - Form Component List with add/remove functionality