Event Handling

Cross-component communication

As components are not aware of each other, they can be used in various combinations in various context. One of the ways of achieving the communication is by using Events. Strudel implements a simple class responsible for controlling event communication - EventEmitter.

Using EventEmitter in components

EventEmitter is available to be imported from Strudel API. It’s automatically included as a mixin for every component, which means by default every component is able to use event communication.

Key methods responsible for handling communication are:

Full specification can be found in the API.

Example below shows cross-component event communication.

<div class="subscriber"></div>
<button class="publisher" data-id="0">0</button>
@Component('.subscriber')
class Subscriber {
init() {
this.$on('publisher:publish', (id) => { // Attaching listener
this.$element.html(`${id}`);
});
}
}
@Component('.publisher')
class Publisher {
@Evt('click')
publish() {
this.$emit('publisher:publish', this.$data.id); // Firing event
}
}

Using EventEmitter outside of components

By extending the EventEmitter you can provide the same publish-subscribe communication mechanism to any JavaScript class. The API is the same as in components.

import { EventEmitter } from 'strudel';

class DataProvider extends EventEmitter {
constructor(url) {
fetch(url).then((resp) => {
this.$emit('data:fetched', resp.json());
});
}
}