# Handling lifecycle when using compose from a view model

**URL:** <https://discourse.aurelia.io/t/handling-lifecycle-when-using-compose-from-a-view-model/4872>\
**Category:** Framework Knowledge\
**Created:** [August 11, 2022, 11:01am UTC](https://discourse.aurelia.io/t/handling-lifecycle-when-using-compose-from-a-view-model/4872 "2022-08-11T11:01:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [August 11, 2022, 11:01am UTC](https://discourse.aurelia.io/t/handling-lifecycle-when-using-compose-from-a-view-model/4872/1 "2022-08-11T11:01:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [August 11, 2022, 7:39pm UTC](https://discourse.aurelia.io/t/handling-lifecycle-when-using-compose-from-a-view-model/4872/2 "2022-08-11T19:39:35Z")

</div>

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

```javascript
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();

```

---

<div class="post-metadata">

**Author:** ![roelplieger](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/roelplieger/32/1197_2.png) [@roelplieger](https://discourse.aurelia.io/u/roelplieger)\
**Post date:** [October 18, 2022, 11:51am UTC](https://discourse.aurelia.io/t/handling-lifecycle-when-using-compose-from-a-view-model/4872/3 "2022-10-18T11:51:37Z")

</div>

> [@Sayan751](#):
>
> ```auto
> this.templatingEngine.enhance({
> element,
> bindingContext: { what: ever },
> });
> 
> ```

I do something like this:

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

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

```