Question

在我的Web应用程序中，我有许多组件列表，用户可以动态添加/删除这些组件。例如，当输入关于他自己的信息时，用户可能会添加包含其孩子姓名的多个文本字段。每个组件都有一个删除链接，还有一个添加链接以添加新组件。标记看起来像这样：

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

其中rows是wicket repeater。

输入组件因列表而异（可能是下拉列表或其他内容，可能会添加不同的验证器，依此类推）但链接保持不变。他们的标记和逻辑不会改变。因为我的表单中有很多这样的列表，所以我有makup和代码重复。我想要的是在删除这些链接时保留我的输入组件的标记，如下所示：

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

将呈现为带有添加/删除链接的文本字段列表。

我知道我必须在某处获得链接的标记，比如自动生成它们或将它们放在面板或其他东西中，我不想每次都复制它们。

UPD：这是使用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

我认为你所描述的问题有一些不同的方面。首先，您希望包装一个输入，以便添加删除链接它。您想重复此包装输入。最后，您希望在重复输入的末尾附加添加链接。最后，您希望将整个事件包装在一个组件中。

首先，在输入中添加删除链接。您可以在此处使用Border。你可以推断，它看起来像

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

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

然后，就问题的其余部分而言，要达到所需的确切行为，您可以通过覆盖Component#onComponentTag()来实现。您可以手动添加链接的HTML，如

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

生成URL的方式很棘手。我不打算介绍它（因为我认为你提出的确切行为是不可行的 - 我将在一秒内解释原因），但你可以使用{{{{{ 3}}作为起点。

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

但最后我相信更好的解决方案是为每种类型的输入（即输入，选择等）设置Component，并按照您想要的方式构建标记，并通过以下方式提供必要的标记更改像Panel这样的检票口行为。这当然意味着某些html会最终出现在Java方面，这并不理想，但是这个解决方案可以很好地运行并且可以快速设置。

Wicket - 具有添加/删除功能的表单组件列表

1 个答案: