Data Properties
Define reactive properties for your UI components with just a few lines of code.
Similar to Vue.js and other frontend JavaScript frameworks, you can define reactive properties on your components.

Defining Properties

You can define and initialize properties on your components using data.
component extends="cbwire.models.Component"{
data = {
"task": ""
};
}
Data properties can only be data types that are castable to JavaScript data types, such as CFML strings, numeric, arrays, structs, or booleans. If you are needing more complex data types for your templates, use computed properties instead.
When data properties are mutated, the UI will update also.

Accessing Properties

Data Variable

You can reference a property using data.[propertyName].
component extends="cbwire.models.Component"{
property name="taskService" inject="[email protected]";
// Data properties
data = {
"task": ""
};
// Action
function addTask(){
taskService.create( data.task );
}
}

Getters

Getter methods are automatically available for your properties based on the property's name. You to access the property within your component using this.get[propertyName]().
component extends="cbwire.models.Component"{
property name="taskService" inject="[email protected]";
// Data properties
data = {
"task": ""
};
// Action
function addTask(){
taskService.create( this.getTask() );
}
}
You can use this as an alternative to using data.

Templates

You can reference data properties within your component template using args.[propertyName].
<cfoutput>
<div>
<h1>Task</h1>
<div>#args.task#</div>
</div>
</cfoutput>

Resetting Properties

You can reset a property back to it's initialized value using reset().
component extends="cbwire.models.Component"{
// Data properties
data = {
"task": "Some task here"
};
// Action
function resetForm() {
reset( "task" ); // Reverts data.task to 'Some task here'
}
}
You can also pass an array of property names.
reset( [ "property1", "property2" ] );

Security

Your component's private variables scope will hold your data property definitions and current values, but it's necessary to be cautious about what you store.
The values of your data properties are included with each XHR response and Livewire uses these values to determine what should be updated in the DOM.
You should NEVER store sensitive data ( such as passwords, SSNs ) that you wouldn't want your application's users to see.
Export as PDF
Copy link
On this page
Defining Properties
Accessing Properties
Data Variable
Getters
Templates
Resetting Properties
Security