"re-attaching" aurelia

Help Requests
1

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

2

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

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; this is useful if you are creating the DOM on runtime, as opposed to working with a pre-attached DOM fragment.

1 Like
3

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.

In the end this worked for me:

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,
            })
        });
    }
});
3 Likes