Wicket - 附加Javascript（什么是更好的练习？）

Question

我在Wicket有两个面板。

ParentPanel和ChildPanel

脚本

ChildPanel是ParentPanel的一个组成部分。每次在父面板中触发某个事件时，我想在ChildPanel中添加某个javascript。

工作方案

ParentPanel.java

public class ParentPanel extends Panel
{
    private static final long serialVersionUID = 4306746527837380863L;
    private final ChildPanel childPanel;

    public ParentPanel(String aId, IModel<AnnotatorState> aModel)
    {
        super(aId);
        model = aModel;

        // initially the Child panel is empty. passing empty model
        childPanel = new ChildPanel("child-container", Model.of());
        childPanel.setOutputMarkupId(true);
        add(childPanel);
    }

    @OnEvent
    public void onClickText(RenderEvent aEvent)
    {
        LOG.trace("Event Fired");
        IPartialPageRequestHandler iPartialPageRequestHandler = aEvent.getRequestHandler();

        Integer someData = getSomeData();
        childPanel.setDefaultModel(Model.of(someData));

        //I am trying to add the child panel to the ajax target to ensure rerendering of child panel.
        iPartialPageRequestHandler.add(childPanel);
    }
}

ChildPanel.java

public class ChildPanel extends Panel
{
    private static final long serialVersionUID = -3849226240909011148L;
    private static final Logger LOG = LoggerFactory.getLogger(ChildPanel.class);
    private IModel<Integer> model;

    public ChildPanel(String aId, IModel<Integer> aModel)
    {
        super(aId);
        model = (aModel);
    }

    @Override
    public void renderHead(IHeaderResponse aResponse)
    {
        super.renderHead(aResponse);
        model = (IModel<Integer>) getDefaultModel();

        if (model == null)
            return;
        Integer someData = model.getObject();
        String someJavascript = createSomeJavascript(someData);

        log.debug("Rendering Updated UI with the JS: ", javascript);
        aResponse.render(OnDomReadyHeaderItem.forScript(javascript));
    }
}

显然，每次将childPanel添加到iPartialPageRequestHandler时都会调用renderHead（），而我的工作就是在ParentPanel中触发的每个事件上更新UI。

问题

但是我被告知这不是一个好习惯。因为在这种情况下，JS被添加到renderHead（），然后它最终出现在页面源代码中 - 这在发送（大）JSON数据时变得很麻烦。只有在Wicket中可行/可行时，才需要找到一个将JS附加到AJAX目标的好地方（可能是render（）或者更好的onRender（）或onAfterRender（））。由于我的知识有限，我无法猜测我还能如何实现这个场景。任何其他（更好或可能）的解决方案都是值得欢迎的。

谢谢。

Answer 1

我认为问题是createSomeJavascript创造了一大堆代码？

然后我会重构它，以便createSomeJavascript只调用你使用JavaScriptResourceReference添加到Component的函数。这样，只有一小部分Javascript在源代码中结束。

例如，将您的javascript放在外部文件中，如下所示：

private static final ResourceReference  JS_QM   = new JavaScriptResourceReference( ClientPanel.class, "question.mark.js" );


@Override
public void renderHead( Component component, IHeaderResponse response )
{
    super.renderHead( component, response );
    response.render( JavaScriptReferenceHeaderItem.forReference( JS_QM, "question-mark" ) );
    ...
}