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"
    };
}

JavaScript parses your data properties. Your data properties can only store JavaScript-friendly values: strings, numerics, arrays, structs, or booleans.

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.

Don't do this.

data = {
    propertyName: "defaultValue"
};

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

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" ] );
}