Events

You can emit events from your cbwire components, views, and also direct from JavaScript. Listeners can be defined to execute specific actions.

You can fire events from within views, components, or by using the global cbwire JavaScript object.

From View

<button wire:click="$emit( 'counterIncremented' )">

From Component

this.emit( "counterIncremented" );

From Javascript Global

<script>
    cbwire.emit( 'counterIncremented' );
</script>

Event Listeners

You can register event listeners on a component by defining variables.listeners.

component extends="cbwire.models.Component"{

	variables.listeners = {
		"counterIncremented": "tweetAboutIt"
	};

	function tweetAboutIt(){
		// Blow up Twitter
	}

	...
}

cbwire will invoke the tweetAboutIt method on the component if any other component on the same page emits a counterIncremented event.

When defining your listeners, it is good to put your listener's names in quotation marks, as we have in our component above. "counterIncremented": "tweetAboutIt"

JavaScript keys are case-sensitive. You can preserve the key casing in CFML by surrounding your listener names in quotations. Without the quotations, CFML will convert the key to all uppercase, such as TWEETABOUTIT. 🙃

Event Listeners In JavaScript

// File: ./views/wires/myView.cfm
<script>
    cbwire.on( 'counterIncremented', counter => {
        alert( 'The counter was incremented with a value of: ' + counter );
    })
</script>