Computed Properties
Create dynamic properties for your UI components.
Computed properties are dynamic properties and are helpful for deriving values from a database or another persistent store like a cache.
Computed properties are similar to Data Properties with some key differences:
  • 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.
Computed properties are cached for the lifetime of the request. Meaning, if you reference your computed property three times in your Template or from within a component Action, it will only execute once.

Defining Properties

You can define computed properties in your components 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();
}
};
}

Accessing Properties

Computed Struct

You can access your computed properties from within your Actions using computed.[propertyName].
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

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();
}
}
}

Templates

You can access computed properties in your Template via the args scope.
<cfoutput>
<div>
<ul>
<cfloop array="#args.allTasks#" index="task">
<li>#task#</li>
</cfloop>
</ul>
</div>
</cfoutput>
Export as PDF
Copy link
On this page
Defining Properties
Accessing Properties
Computed Struct
Getters
Templates