Data Binding

You can bind your Data Properties and HTML elements within your Template using wire:model.

// wires/MyComponent.cfc
component extends="cbwire.models.Component" {

    // Data properties
    data = {
        "message" : "",
        "isChecked": false,
        "isSelected": "",
        "hero": ""
    };

}

<!--- ./wires/MyComponent.cfm --->
<cfoutput>
    <div>
        <form>
            <input wire:model="message" type="text">
            <input wire:model="isChecked" type="checkbox" value="true">
            <input wire:model="isSelected" name="isSelected" type="radio" value="true">
            <input wire:model="isSelected" name="isSelected" type="radio" value="false">
            <select wire:model="hero">
               <option value=""></option>
                <option value="Batman">Batman</option>
                <option value="Superman">Superman</option>
            </select>
        </form>
    </div>
</cfoutput>

See the wire:model page for the available modifiers and various uses.

When Data Properties are updated using wire:model, CBWIRE has several lifecycle methods you can hook into such as onUpdate(), and onUpdate[PropertyName]().

More details can be found under Lifecycle Methods.