Handling lifecycle when using compose from a view model

Framework Knowledge
1

I have a scenario where I am “enhancing” a Syncfusion grid column with aurelia templates. because syncfusion directly manipulates the DOM I had to rely on using CompositionEngine.compose to create Aurelia components when needed. This works great and it’s been in use for over 2 years and production for 10 months.

I was extending functionality when I realized my detached() functions were not being called. I got around this by keeping references to my created components and looping through them to dispose of them correctly when the grid rows change.

My question is, what is the correct way to deal with this components that are created outside of the regular view pipeline. I know I can call unbind() , detached() on the viewSlot, but is there something else I’m missing on the CompositionContext Is setting properties to null good enough?

2

I did something like this quite a while back, and it still seems to work.

const element = here.you.create.HTMLElementFragment();
this.templatingEngine.enhance({
  element,
  bindingContext: { what: ever },
});
// grab the controller
const controller = element['au'].controller;

// later when you want to tearDown
controller.detached();
controller.unbind();
1 Like
3

I do something like this:

this.enhancedView = this.templatingEngine.enhance(...);

//later when you want to tearDown
this.enhancedView.detached();
this.enhancedView.unbind();
this.enhancedView.removeNodes();
this.enhancedView = undefined;
2 Likes