Computed Properties
Create dynamic properties for your UI Wires.
If you are on CBWIRE version 2.3.x and have enabled the configuration property useComputedPropertiesProxy, then you will need to follow this guide here instead as this fundamentally changes how computed properties are referenced and accessed.
Computed Properties are dynamic properties and are helpful for deriving values from a database or another persistent store like a cache.
- They are declared as inline functions using
computed
. - They can return any type of CFML value or object, not just values that can be serialized and parsed by JavaScript like Data Properties.
You can define Computed Properties on your Wires using
computed
. Each Computed Property is invoked only once during a single request cycle.component extends="cbwire.models.Component" {
property name="taskService" inject="[email protected]";
// Computed Properties
computed = {
"allTasks": function() {
return taskService.getAll();
}
};
}
component extends="cbwire.models.Component" {
property name="taskService" inject="[email protected]";
// Computed Properties
computed = {
"allTasks": function() {
return taskService.getAll();
}
};
// Action
function deleteTasks() {
// Notice below we don't invoke the method using computed.allTasks().
// We instead just use 'computed.allTasks'.
// At this point, cbwire has rendered our computed properties
// and overwritten the references with their result.
if ( arrayLen( computed.allTasks ) {
taskService.deleteAll();
}
}
}
Getters are automatically created based on the property's name.
In the example below, you to access the property using
this.getAllTasks()
. You can use this as an alternative to using computed
.component extends="cbwire.models.Component" {
property name="taskService" inject="[email protected]";
// Computed Properties
computed = {
"allTasks": function() {
return taskService.getAll();
}
};
// Action
function deleteTasks() {
if ( arrayLen( this.getAllTasks() ) {
taskService.deleteAll();
}
}
}
<cfoutput>
<div>
<ul>
<cfloop array="#args.allTasks#" index="task">
<li>#task#</li>
</cfloop>
</ul>
</div>
</cfoutput>
Last modified 16d ago