Data Properties

Overview

Data Properties hold the state of our component and are defined with a data structure in your component. Each data property is assigned a default value.

//./wires/SomeComponent.cfc
component extends="cbwire.models.Component" {
    data = {
        "propertyName": "defaultValue"
    };
}

Accessing From Actions

Using the data structure, you can access data properties from within your component actions.

// ./wires/Date.cfc
component extends="cbwire.models.Component" {
    // Data properties
    data = {
        "time": now()
    };    
    // Action
    function updateTime(){
        data.time = now();
    }
}

Accessing From Templates

You can access data properties within your templates using #propertyName#.

<cfoutput>
    <div>
        <h1>Current time</h1>
        <div>#time#</div>
        <button wire:click="updateTime">Update</button>
    </div>
</cfoutput>

Resetting Properties

You can reset all data properties to their original default value inside your actions using reset().

component extends="cbwire.models.Component" {
    data = {
        "time": now()
    };
    function resetTime(){
        reset();
    }
}

You can reset individual, some, or all data properties.

function resetForm() {
    reset( "message" ); // resets 'message' data property
    reset( [ "message", "anotherprop" ] ); // reset multiple properties at once
    reset(); // resets all properties
}

You also can reset all properties EXCEPT the properties you pass.

function resetForm() {
    resetExecept( "email" );
    resetExcept( [ "email", "phoneNumber" ] );
}

Last updated

Was this helpful?