我的 Wicket TabbedPanel 不保留表单字段值答案

【问题标题】：My Wicket TabbedPanel doesn't keep the form field values我的 Wicket TabbedPanel 不保留表单字段值
【发布时间】：2020-10-01 15:00:30
【问题描述】：

我是使用 Apache Wicket 的新手。我正在创建一个面板来在网站上添加文章。我的文章编辑面板由 TabbedPanel 组成：第一个选项卡用于编辑，第二个选项卡用于预览文章。

如果我在编辑器（textarea）中输入了一些文本后，我切换到预览并返回编辑器，le textarea 是空的。

这里是带有 TabbedPanel 的面板的一部分代码：

public AddArticlePanel(String id, ArticleEdit articleEdit) {
        super(id);

        final List<AbstractTab> tabList = new ArrayList<>();
        tabList.add(new AbstractTab(new Model<String>("Editor")) {
            @Override
            public WebMarkupContainer getPanel(String panelId) {
                return new ArticleEditorPanel(panelId, articleEdit);
            }
        });
        tabList.add(new AbstractTab(new Model<String>("Preview")) {
            @Override
            public WebMarkupContainer getPanel(String panelId) {
                return new ArticlePreviewPanel(panelId, articleEdit);
            }
        });
        tabs = new TabbedPanel<AbstractTab>("tabs", tabList);

        final SubmitLink submitButton = new SubmitLink("submit") {
            @Override
            public void onSubmit() {
                // TODO
            }
        };

        addArticleForm = new Form<ArticleEdit>("add-article-form", new Model<ArticleEdit>(articleEdit));
        addArticleForm.add(tabs);
        addArticleForm.add(submitButton);
        add(addArticleForm);
    }

这里是编辑器面板的 HTML：

<wicket:panel>
        <div wicket:id="feedback"></div>

        <div class="fields">
            <label for="title">Title</label>
            <input type="text" name="title" wicket:id="title">
        </div>
        <div class="fields">
            <label for="text">Text</label>
            <textarea class="notab" name="text" wicket:id="text"></textarea>
        </div>
        <div class="fields">
            <label for="keywords">Keywords</label>
            <input type="text" name="keywords" wicket:id="keywords">
        </div>
</wicket:panel>

此编辑器面板的代码：

public ArticleEditorPanel(String id, ArticleEdit articleEdit) {
        super(id);

        final FeedbackPanel feedbackPanel = new FeedbackPanel("feedback");

        title = new TextField<String>("title", new PropertyModel<String>(articleEdit, "title"));
        title.setRequired(true);

        text = new TextArea<String>("text", new PropertyModel<String>(articleEdit, "text"));
        text.setRequired(true);

        keywords = new TextField<String>("keywords", new PropertyModel<String>(articleEdit, "keywords"));
        keywords.setRequired(true);

        add(title);
        add(text);
        add(keywords);
        add(feedbackPanel);
    }

最后是ArticleEdit类的源码：

public class ArticleEdit implements Serializable {

    private String title;

    private String text;

    private String keywords;

    private String preview;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getKeywords() {
        return keywords;
    }

    public void setKeywords(String keywords) {
        this.keywords = keywords;
    }

    public String getPreview() {
        return preview;
    }

    public void setPreview(String preview) {
        this.preview = preview;
    }
}

为什么它不能开箱即用？我的错在哪里？

感谢您的帮助。

【问题讨论】：

标签： tabs wicket

【解决方案1】：

在导航到 PREVIEW 选项卡之前，您不会保存 EDIT 选项卡中的状态。

通过单击“预览”链接，浏览器将向服务器发出新请求，Wicket 将重新呈现整个页面，因此在表单字段中输入的任何数据都将丢失。

您可以通过将 AjaxFormComponentUpdatingBehavior 添加到表单字段来轻松保存数据。例如title 字段：

title = new TextField<String>("title", new PropertyModel<String>(articleEdit, "title"));
title.setRequired(true);
title.add(new AjaxFormComponentUpdatingBehavior("change") {
    @Override public void onUpdate(AjaxRequestTarget target) {}
    @Override public void onError(AjaxRequestTarget target) {
         target.add(feedbackPanel);
    }
});

【讨论】：