Cómo derribar un fragmento mejorado
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?