Components represent your UI elements and include a powerful feature-set.
Components primarily consist of the following:
  • Data Properties Reactive properties that we can easily change.
  • Computed Properties Properties that are computed every time our template is rendered.
  • Actions Methods that make state changes to our data properties.
  • Events and Listeners Listen for emitted events within Components or client-side JavaScript.
  • Templates HTML to render our component.


// File: wires/TaskList.cfc
component extends="cbwire.models.Component"{
// Data properties
data = {
"task": "",
"tasks": []
// Computed properties
computed = {
"counter": function() {
return arrayLen( data.tasks );
// Listeners
listeners = {
"taskAdded": "sendEmail"
// Action
function addTask(){
data.tasks.append( data.task );
this.emit( "taskAdded", data.task );
<!--- /views/wires/tasklist.cfm --->
<div>Number of tasks: #args.counter#</div>
<div><input wire:model="task"></div>
<div><button wire:click="addTask">Add Task</button></div>


You can scaffold components quickly using the commandbox-cbwire module.
From our CommandBox shell, type:
install commandbox-cbwire
Let's create a Counter cbwire component that we will use to list our favorite movies.
cbwire create Counter
// Created /wires/Counter.cfc
// Created /views/wires/counter.cfm
// Created /tests/specs/integration/wires/CounterTest.cfc
You can provide named arguments as well.
cbwire create name=Counter views=false
// Created /wires/Counter.cfc
// Created /tests/specs/integration/wires/CounterTest.cfc
Export as PDF
Copy link
On this page