arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Events & Listeners

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

hashtag
Emitting Events

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

hashtag
Actions

Using the emit method:

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

circle-info

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

hashtag
Templates

Using the $emit() method:

hashtag
JavaScript

Using the global cbwire.emit():

hashtag
Listeners

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

circle-info

The clearCache method will be invoked when a taskAdded event is emitted.

circle-exclamation

JavaScript keys are case-sensitive. You can preserve the key casing in CFML by surrounding your listener names in quotations.

hashtag
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>