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


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

Last updated