All pages
Powered by GitBook
1 of 1

Loading...

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:

You can provide arguments to all listeners by passing an array as the second argument.

When emitting events, arguments must be passed as an array to ensure proper positioning both within CFML and JavaScript.

Templates

Using the $emit() method:

JavaScript

Using the global cbwire.emit():

Listeners

You can register event listeners on a Wire by defining listeners.

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

Actions
function someAction() {
    emit( "taskAdded" );
}
function someAction() {
    emit( "taskAdded", [
        "some task",
        now()
    ] );
}
<button wire:click="$emit( 'taskAdded' )">
<script>
    cbwire.emit( 'taskAdded' );
</script>
component extends="cbwire.models.Component"{
    
    listeners = {
        "taskAdded": "clearCache"
    };

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