I would like to create a global component that will handle alert boxes and notifications on my page. The trigger will be in other sibling components
<body>
<alerts/>
<component1 />
<component2/>
</body>
The code for alerts.marko is the following one
class {
onMount() {
this.subscribeTo(document).on('alert', this.handleAlert)
}
handleAlert() {
// do some animations, make it visible
}
}
The code for my sibling components component1.marko
class {
doSomething() {
// do some async operation
this.emit('alert', alertData);
}
}
The problem is that this idea is not working, it works ok when component1 is a child of the alerts component and use the on-[event]() structure.
How can I implement it in marko.js?