Data Properties

Data Properties hold the state of our component.

Defining Data Properties

Data Properties are defined by creating a data structure on your component and assigning each property a default value.

component extends="cbwire.models.Component" {

    data = {
        "propertyName": "defaultValue" // good
        propertyName: "defaultValue" // bad, needs quotes for key
    };

}

Single or double quotes must surround property names.

JavaScript is a case-sensitive language, and CFML isn't. To preserve the casing of your property names, you must surround them with quotes.

Data Properties are parsed by JavaScript and can, therefore, only store JavaScript-friendly values: strings, numerics, arrays, structs, or booleans.

Data Properties are visible to JavaScript. You SHOULD NOT store sensitive data in them.

Default Values

Data properties should be assigned a default value, even if it's just an empty string.

component extends="cbwire.models.Component" {

    data = {
        "success": false,
        "message": "Hello World"
    };

}

Actions

You can access Data Properties from within your component Actions like so.

component extends="cbwire.models.Component" {

    // Data properties
    data = {
        "time": now()
    };
    
    // Action
    function updateTime(){
        data.time = now();
    }

}

Templates

You can reference Data Properties within your component template using #propertyName#.

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

Resetting Properties

You can reset properties to their original default value inside your Actions using reset().

component extends="cbwire.models.Component" {

    // Data properties
    data = {
        "time": now()
    };
    
    // Action
    function resetTime(){
        reset();
    }

}

You can reset individual 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" ] );
}