Estou trabalhando em um SPA existente, onde substituímos os componentes pelos componentes Aurelia passo a passo. Nós usamos oenhance API doTemplatingEngine. Isso funciona muito bem, mas também precisamos desmembrar esses fragmentos aprimorados (remover ouvintes de eventos, ...) ao passar para outra parte do aplicativo (sem recarregar a página).

Minha idéia é manter a instância aurelia na página e reutilizá-la.

Atualmente, aprimoro fragmentos como este:

function enhanceFragment(targetElement) {

    function proceed() {
        let aurelia = window.DFAurelia;
        let engine = aurelia.container.get(TemplatingEngine);
        engine.enhance({
            container: aurelia.container,
            element: targetElement,
            resources: aurelia.resources
        });
    }

    if (!window.DFAurelia) {
        bootstrap(async aurelia => {
            aurelia.use
                .defaultBindingLanguage()
                .defaultResources()
                .eventAggregator()
                .developmentLogging()
                .globalResources('app/df-element');

            await aurelia.start();
            window.DFAurelia = aurelia;
            proceed();
        });
    } else {
        proceed();
    }
}

O HTML aprimorado se parece com:

<df-element></df-element>

Eu tentei isso em função do próprio elemento personalizado (DfElement::removeMyself()):

let vs: ViewSlot = this.container.get(ViewSlot);
let view: View = this.container.get(View);
vs.remove(view);
vs.detached();
vs.unbind();

mas recebo um erro ao obter a visualização do contêiner (Não é possível ler a propriedade 'recursos' de indefinido) Eu chamei essa função de um manipulador de cliques.

Pergunta principal: como acionar manualmente ounbind edetached ganchos doDfElement e seus filhos?

Perguntas sobre bônus: propriedades do meuaurelia instância (window.DFAurelia) root ehost são indefinidos: isso é uma coisa ruim? Você vê algum problema em potencial com essa maneira de aprimorar (e não aprimorar) fragmentos na página?