Events & Listeners

Emitting Events
You can emit events from your components, CBWIRE templates, and JavaScript.
Components
Using the emit method:
function someAction() {
    emit( "taskAdded" );
}
You can provide arguments to all listeners by passing an array as the second argument.
function someAction() {
    emit( "taskAdded", [
        "some task",
        now()
    ] );
}
When emitting events, arguments must be passed as an array to ensure proper positioning both within CFML and JavaScript.
CBWIRE Templates
Using the $emit() method:
<button wire:click="$emit( 'taskAdded' )">
JavaScript
Using the global cbwire.emit():
<script>
    cbwire.emit( 'taskAdded' );
</script>
Listeners
You can register event listeners on a component by defining listeners.
component extends="cbwire.models.Component"{
    
    listeners = {
        "taskAdded": "clearCache"
    };
​
    function clearCache(){}
}
The clearCache method on the component will be invoked when a taskAdded event is emitted.
JavaScript keys are case-sensitive. You can preserve the key casing in CFML by surrounding your listener names in quotations.
JavaScript
Listening to events that you emit in your Components can be done using cbwire.on().
<script>
    cbwire.on( 'taskAdded', task => {
        console.log( 'A task was added. ');
    })
</script>

Essentials - Previous

Templates

Next - Essentials

Component Lifecycle

Last modified 1mo ago

Export as PDF

Copy link

On this page

Emitting Events

Components

CBWIRE Templates

JavaScript

Listeners

JavaScript