Data Properties

Initializing Properties
You can define and initialize reactive properties on your cbwire components using variables.data. 
When data properties are mutated, the UI will update also.
1
// File: wires/Counter.cfc
2
component extends="cbwire.models.Component"{
3
    variables.data = {
4
        "counter": 0
5
    };
6
    ...
7
}
Copied!
Referencing Properties
You can reference a property directly in your component using variables.data.[ property name ].
1
// File: wires/Counter.cfc
2
component extends="cbwire.models.Component"{
3
​
4
    // Data properties
5
    variables.data = {
6
        "counter": 0
7
    };
8
    
9
    // Action called from UI
10
    function increment(){
11
        variables.data.counter += 1;
12
    }
13
    ...
14
}
Copied!
You can also reference any defined properties from your cbwire component view using args.[ property name  ].
1
// File: views/wires/counter.cfm
2
<cfoutput>
3
<div>
4
    <h1>Counter</h1>
5
    <div>Count: #args.counter#</div>
6
</div>
7
</cfoutput>
Copied!
Things To Know
Your component's private variables scope will hold your data property definitions and current values, which is seemingly secure, but it's necessary to be cautious about what you store. cbwire communicates with the server via Livewire using AJAX requests and includes the current state of the data properties within those requests.
cbwire includes the current values of the data properties during requests to determine what state has changed and if Livewire should update the DOM.
You should NEVER store sensitive data ( such as passwords, SSNs ) that you wouldn't want your application's users to see.
Data properties can only be data types that are castable to JavaScript data types, such as CFML strings, numeric, arrays, structs, or booleans.
​

Essentials - Previous

Rendering Views

Next - Essentials

Actions

Last modified 2mo ago

Copy link

Edit on GitHub

Contents

Initializing Properties

Referencing Properties

Things To Know