Links
Comment on page

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

You can access Data Properties from within your component Actions like so.
<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

You can reset properties back to their original value inside your Actions using reset().
<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>
There are also several modifiers you can add to control when and how requests are sent to your server.