Question

我们正在编写一个支持AJAX的Wicket应用程序，并且有通过renderHead()提供CSS的面板。但是，当通过AJAX替换面板时 - 例如，通过AjaxTabbedPanel，旧面板的标头贡献仍然存在并污染应用程序的其余部分。除了响应膨胀之外，当CSS声明过于通用时会导致问题，从而导致应用程序的其他区域出现渲染问题。

有解决方法吗？比方说，当一个面板被替换/不再可见时，重新创建IHeaderReponse的机制？

对于它的价值，我们的标题贡献者的一个例子是：

@Override
public void renderHead(IHeaderResponse response) {
    response.renderCSSReference(new SharedResourceReference(SearchMainPanel.class, "Search.css"));
}

我们正在使用Wicket 1.5.3。

我在自定义标签上取得了成功，该标签在Panel的<link rel="stylesheet" ... />标记中呈现<body>（即，不使用标题贡献者），但IE8拒绝承认此CSS的存在 - 因此具有重新考虑我们的战略。

Answer 1

每个 AjaxRequestTarget都会收到专门针对该请求的新IHeaderResponse 。您看到的问题是由于先前的请求使用您不再希望存在于该页面的样式表进行响应。让浏览器忽略您已经在页面上呈现的样式表的唯一方法是重新呈现没有该文件的页面。

在这种情况下，您可以在第一次渲染每个选项卡时依赖于样式的级联，因为Wicket将在您渲染该Panel时加载关联的样式表。但是，当您返回到先前已渲染的选项卡（Panel）时，Wicket将不会重新渲染样式表，因为它已经被加载。这意味着您需要有办法克服级联样式的限制。

执行此操作的最佳方法是命名空间 ...意味着您应该将每个面板包装在带有命名空间类的标记中（例如“tab1”或更符合上下文的内容），然后你将把你所有的风格基于这个类：

.tab1 .heading {
    font-weight: bold;
}

.tab1 .description {
    background: blue;
}

.tab2 .heading {
    font-size: 1.3em;
}

.tab2 .description {
    background: lightblue;
}

这将确保您能够区分每个选项卡的各个样式，以及您可能需要的任何级联仍然适用于命名空间选择器

Wicket - 删除陈旧的标题贡献/ AJAX面板替换

1 个答案: