Калитка - Добавить Javascript (Что такое лучшая практика?) - PullRequest
Новая
       13

Калитка - Добавить Javascript (Что такое лучшая практика?)

2 голосов
/ 19 марта 2019

У меня есть две панели в калитке.

ParentPanel и ChildPanel

Сценарий

ChildPanel является компонентом ParentPanel.Каждый раз, когда на родительской панели запускается определенное событие, я хочу добавить определенный javascript в ChildPanel.

Рабочий раствор

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));
    }
}

Очевидно, метод renderHead () вызывается каждый раз, когда childPanel добавляется в iPartialPageRequestHandler, и он выполняет мою работу по обновлению пользовательского интерфейса при каждом событии, запущенном вParentPanel.

Задача

Однако мне сказали, что это не очень хорошая практика.Поскольку в этом случае JS добавляется в renderHead (), он заканчивается в исходном коде страницы, что становится громоздким при отправке (больших) данных JSON.Нужно найти хорошее место для присоединения JS к цели AJAX (возможно, render () или, возможно, лучше onRender () или onAfterRender ()), только если это возможно / выполнимо в Wicket.Из-за моих ограниченных знаний я не могу догадаться, как еще я могу реализовать сценарий.Любое другое (лучшее или возможное) решение приветствуется и приветствуется.

Спасибо.

1 Ответ

1 голос
/ 20 марта 2019

Я предполагаю, что проблема в том, что createSomeJavascript создает большой кусок кода?

Я бы затем реорганизовал его так, чтобы createSomeJavascript просто вызывал функцию, которую вы добавляете в Компонент, используя JavaScriptResourceReference.Таким образом, только маленький кусочек 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" ) );
    ...
}
...