2

在我当前的 Wicket 应用程序中，我目前在用户单击一个菜单项后重新加载整页。我想将其更改为仅重新加载必要的面板。

我目前在做什么：

我有一个BasePage.html包含菜单项和一些静态内容的内容：

<li><a wicket:id="home" href="#">Home</a></li>
<li><a wicket:id="user" href="#">User</a></li>

<!-- and so on ->

<div class="panelarea">
    <wicket:child />
</div>

和我的（摘要）BasePage.java：

add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        setResponsePage(new HomePage());
    }
});
//etc

我的HomePage.html：

<wicket:extend>
    <span wicket:id="homePanel"></span>
</wicket:extend>

我的HomePage.java（和所有其他页面）然后添加面板：

add(new HomePanel("homePanel"));

而不是setResponsePage()我想在<div class="panelarea">不重新渲染整个页面的情况下打开面板。

谁能给我一个提示？

4

2 回答 2

6

你有两种可能：

  1. 隐藏您的面板并在 ajax 请求后显示它
  2. 放置一个 EmptyPanel 并在 ajax 请求后替换它

在这两种情况下，您都必须在标记中放置一个占位符标记，包括输出标记

<span wicket:id="homePanel"></span>

解决方案 1：隐藏您的面板并在 ajax 请求后显示它

final Panel homePanel = new HomePanel("homePanel");
homePanel.setOuputMarkupPlaceholderTag(true);
homePanel.setOuputMarkupId(true);
homePanel.setVisible(false);
add(homePanel);
add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        homePanel.setVisible(true);
        // in Wicket 1.4 instead of target.add(Component)
        // target.addComponent(homePanel);
        target.add(homePanel);
    }
});

解决方案 2：放置一个 EmptyPanel 并在 ajax 请求后替换它

final Panel emptyPanel = new EmptyPanel("homePanel");
emptyPanel.setOuputMarkupPlaceholderTag(true);
emptyPanel.setOuputMarkupId(true);
add(emptyPanel);
add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        Panel homePanel = new HomePanel("homePanel");
        homePanel.setOuputMarkupPlaceholderTag(true);
        homePanel.setOuputMarkupId(true);
        // if your Page class is MyPage.class
        MyPage.this.addOrReplace(homePanel);
        // in Wicket 1.4 instead of target.add(Component)
        // target.addComponent(homePanel);
        target.add(homePanel);
    }
});
于 2014-06-05T13:48:47.957 回答
1

为要替换的 div 创建一个内容面板对象：

 private Panel currentpanel = getHomePagePanel(); // fill it with any Panel you want.

您可以像这样替换“内容”面板：

private void changePanel() {
    Panel newpanel = getNewPanel(); // Or pass as arg to this function
    newpanel.setOutputMarkupId(true);
    currentpanel.replaceWith(newpanel);
    currentpanel = newpanel;
    target.add(currentpanel);
}

在您的 ajaxlink onSubmit 中调用它，并使用正确的面板替换旧面板。

于 2014-06-05T13:44:14.840 回答