CBWIRE
InstallSource CodeIssuesSupport
v3.x
v3.x
  • Introduction
  • Getting Started
  • Configuration
  • How It Works
  • Release History
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Examples
    • Contact Form
    • Multi-select Input
    • File Upload
  • Resources
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Actions
    • Events
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • SPAs with Turbo
    • AlpineJS
Powered by GitBook
On this page
  • Initial Values
  • Using Data Properties
  • Resetting Data Properties
  • Data Binding
  1. The Essentials

Data Properties

The state of the our components.

Components have state known as Data Properties.

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

<!--- ./wires/SomeComponent.cfm --->
<cfscript>
    data = {
        "propertyName": "defaultValue"
    };
</cfscript>

Property names must be surrounded by single or double quotes.

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

// Bad
data = {
    propertyName: "defaultValue"
};

// Good
data = {
    "propertyName": "defaultValue"
};

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

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

Initial Values

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

<cfscript>
    data = {
        "success": false,
        "message: "Hello World"
    };
</cfscript>

Using Data Properties

<cfscript>
    // Data properties
    data = {
        "task": ""
    };
    
    // Action
    function addTask(){
        taskService.create( data.task );
        data.task = "";
    }
</cfscript>

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

<cfoutput>
    <div>
        <h1>Task</h1>
        <div>#task#</div>
    </div>
</cfoutput>

Resetting Data Properties

<cfscript>
    // Data properties
    data = {
        "message" : "Hello world"
    };
    
    // Actions    
    function resetForm() {
        reset();
    }
</cfscript>

<cfoutput>
    <div>
        <button wire:click="resetForm">Reset</button>
    </div>
</cfoutput>

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

Data Binding

You can bind your data properties and HTML elements using wire:model.

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

<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>
PreviousTemplatesNextComputed Properties

Last updated 1 year ago

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

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

There are also several you can add to control when and how requests are sent to your server.

Actions
Actions
modifiers