Events & Listeners

You can emit events from both your Wires and JavaScript. Superb!

Emitting Events

You can emit events from Actions, Templates, and JavaScript.

Actions

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.

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 Wire by defining listeners.

component extends="cbwire.models.Component"{
    
    listeners = {
        "taskAdded": "clearCache"
    };

    function clearCache(){}
}

The clearCache method 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 Actions can be done using cbwire.on().

<script>
    cbwire.on( 'taskAdded', task => {
        console.log( 'A task was added. ');
    })
</script>