# "re-attaching" aurelia

**URL:** <https://discourse.aurelia.io/t/re-attaching-aurelia/4859>\
**Category:** Help Requests\
**Created:** [July 26, 2022, 6:21pm UTC](https://discourse.aurelia.io/t/re-attaching-aurelia/4859 "2022-07-26T18:21:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [July 26, 2022, 6:21pm UTC](https://discourse.aurelia.io/t/re-attaching-aurelia/4859/1 "2022-07-26T18:21:11Z")

</div>

Hi,

I am using v2 in a django-cms project. Aurelia is loaded using the enhance feature.

My problem is that django-cms offers some frontend editing capabilities. After making changes on the page, the content is updated without a reload. The django-cms is updating the dom dynamically. After an update, the Aurelia components are all still visible, but not responsive anymore.

django-cms sends an event notifying any listeners that an update has completed. I would like to “re-attach” Aurelia at that point.

Does anyone have a tip how I might do this?

Thanks in advance,  
Alex

---

<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:** [July 26, 2022, 8:23pm UTC](https://discourse.aurelia.io/t/re-attaching-aurelia/4859/2 "2022-07-26T20:23:25Z")

</div>

The simplest thing to do might be to leverage the `controller` returned by the `.enhance`. Refer the docs: [App configuration and startup - The Aurelia Docs](https://docs.aurelia.io/getting-to-know-aurelia/app-configuration-and-startup#enhance)

```nohighlight
const controller = await au.enhance({ host, component });

```

You can keep this reference to the controller around. `enhance` will activate this controller. However, you can `controller.deactivate` to remove the Aurelia magic dusts from the DOM, and then when you need it again, just do `controller.activate`.

Also FYI: [https://docs.aurelia.io/tutorials/synthetic-view](https://docs.aurelia.io/tutorials/synthetic-view); this is useful if you are creating the DOM on runtime, as opposed to working with a pre-attached DOM fragment.

---

<div class="post-metadata">

**Author:** ![aGustafson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@aGustafson](https://discourse.aurelia.io/u/aGustafson)\
**Post date:** [July 29, 2022, 9:46am UTC](https://discourse.aurelia.io/t/re-attaching-aurelia/4859/3 "2022-07-29T09:46:08Z")

</div>

Thanks Sayan,

This didn’t quite work for me, maybe because I could not deactivate before activating. I dont have a “cms-update-will-start” event that I can hook up to.

I looked around to see how the react people do it and found this [link](https://vinitkumar.me/2018-05-24-React-With-Django-CMS/).

In the end this worked for me:

```nohighlight
import Aurelia from 'aurelia';
import { App } from './app';
import * as Attributes from './attributes/index';
import * as Components from './components/index';

const au = new Aurelia();

au.register(App)
au.register(Attributes)
au.register(Components)

const controller = await au.enhance({
    host: document.querySelector('body'),
    component: App,
})

document.addEventListener("DOMContentLoaded", () => {
    // Handler when the DOM is fully loaded
    if (window['CMS'] !== undefined) {
        window['CMS'].$(window).on('cms-content-refresh', () => {
            // render react or call for actions that were skipped because of the
            // change in how djangoCMS behaves now.
            controller.deactivate
            controller.activate

            au.enhance({
                host: document.querySelector('body'),
                component: App,
            })
        });
    }
});

```