Computed Properties

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>

Essentials - Previous

Data Properties

Next - Essentials

Actions

Last modified 6mo ago

Export as PDF

Copy link

On this page

Defining Properties

Accessing Properties

Computed Struct

Getters

Templates