Links

Wires

Wires are reactive UI elements you create. They include a powerful feature-set provided by CBWIRE.
Wires primarily consist of the following:

Basic Example

// 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 --->
<cfoutput>
<div>
<div>Number of tasks: #args.computed.counter()#</div>
<div><input wire:model="task"></div>
<div><button wire:click="addTask">Add Task</button></div>
</div>
</cfoutput>

Scaffolding

You can scaffold Wires quickly using the commandbox-cbwire module.
From our CommandBox shell, type:
install commandbox-cbwire
Let's create a Counter Wire 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