Estoy trabajando en un SPA existente donde reemplazamos componentes con componentes Aurelia paso a paso. Usamos elenhance API de laTemplatingEngine. Eso funciona bastante bien, pero también tenemos que eliminar esos fragmentos mejorados (eliminar oyentes de eventos, ...) al pasar a otra parte de la aplicación (sin recargar la página).

Mi idea es mantener la instancia de aurelia en la página y reutilizarla.

Actualmente realzo 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();
    }
}

El HTML que realzo se ve así:

<df-element></df-element>

Intenté esto en función del elemento personalizado en sí (DfElement::removeMyself()):

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

pero recibo un error al obtener la vista del contenedor (No se pueden leer los 'recursos' de propiedad de undefined) Llamé a esta función desde un controlador de clic.

Pregunta principal: cómo activar manualmente elunbind ydetached ganchos de laDfElement y sus hijos?

Preguntas extra: propiedades de miaurelia instancia (window.DFAurelia) root yhost no están definidos: ¿es eso algo malo? ¿Ve algún problema potencial con esta forma de mejorar (y no mejorar) fragmentos en la página?